下拉点击菜单图标后不打开
我正在制作一个酒店管理网站，其中我在导航栏中有三个列表项，其中之一是下拉菜单图标。问题是这个菜单图标在点击它时不会打开，但如果我单击离它有点远。不知道这背后的错误是什么，现在已经尝试纠正这个问题几个小时了。任何形式的帮助都会很棒。谢谢。
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 3000);
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.slider img {
width: 60%;
height: 24%;
margin-left: 20%;
margin-top: 1%;
}
.slider {
background-color: black;
}
ul li img {
max-height: 40px;
}
.login_pic {
height: 20px;
}
.wrapper {
list-style-type: none;
max-width: 1600px;
margin-left: 20%;
}
li {
float: left;
}
li a {
display: inline-block;
color: black;
text-decoration: none;
width: 40px;
padding: 0 2%;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
background-color: green;
position: absolute;
min-width: 160px;
float: none;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
float: none;
}
.dropdown-content a:hover {
background-color: black;
padding-right: 40px;
}
.show {
display: block;
}
.dropbtn img {
margin-top: 12px;
margin-left: 7px;
max-height: 30px;
max-width: 30px;
background-color: none;
border: none;
cursor: pointer;
background-color: none;
}
.login_pic {
margin-top: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hotel Paradise</title>
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="Stylesheet" href="main.css">
<link rel="Stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<body>
<header>
<a href="index.php" id="logo">
<h1>Hotel Paradise</h1>
<h5>Banquet|Restaurant|Lounge|Stay</h5>
</a>
<div class="wrapper">
<nav>
<ul>
<li>
<a href="index.php">
<img src="images/home_symbol.png" title="Home" />
</a>
</li>
<li>
<a href="login_register.php">
<img src="images/login_symbol.png" class="login_pic" title="Login" />
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">
<img src="images/drop_down.png" />
</a>
<div class="dropdown-content" id="myDropdown">
<a href="stay.php">Reservation</a>
<a href="feedback.php">Feedback</a>
<a href="about.php">Contact Us</a>
</div>
</li>
</ul>
</nav>
<div>
</header>
<div id="main">
<p>"Welcome".</p>
</div>
<div class="slider">
<img class="mySlides" src="images/homepage.jpg">
<img class="mySlides" src="images/homepage_2.jpg">
</div>
</body>
</html>最佳答案
沙瓦特，
这里的问题是，当您单击该图标时，您的 window.onclick() 函数正在撤消该次单击对 css 的更改。
下面是好案例的演练:
- 点击图标的边缘。
- 这会触发 a.dropbtn 元素，因此会触发 onclick() 处理程序并添加“show”类。
- 然后该事件向上冒泡到 window.onclick 处理程序，目标匹配 .dropbtn，因此它什么都不做。
在坏的情况下:
- 点击图片。
- 事件对该元素不做任何事情，因此冒泡到 a.dropbtn
- a.dropbtn 上的 onclick 处理程序被触发，显示类被添加。
- 事件冒泡到 window.onclick。在这种情况下，目标是 img，而不是 a.dropbtn，所以 !e.target.matches('.dropbtn') 为真，显示被删除。 因此，下拉菜单的删除速度与添加速度一样快。
解决此问题的一个方法是向您的点击处理程序添加一个 event.e.stopPropagation() 调用。如下所示:
window.myFunction = function myFunction(event) {
document.getElementById("myDropdown").classList.toggle("show");
event.stopPropagation();
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.wrapper {
list-style-type: none;
max-width: 1600px;
margin-left: 20%;
}
li {
float: left;
}
li a {
display: inline-block;
color: black;
text-decoration: none;
width: 40px;
padding: 0 2%;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
background-color: green;
position: absolute;
min-width: 160px;
float: none;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
float: none;
}
.dropdown-content a:hover {
background-color: black;
padding-right: 40px;
}
.show {
display: block;
}
.dropbtn img {
margin-top: 12px;
margin-left: 7px;
max-height: 30px;
max-width: 30px;
background-color: none;
border: none;
cursor: pointer;
background-color: none;
}<header>
<div class="wrapper">
<nav>
<ul>
<li>
<a href="index.php">
<img src="images/home_symbol.png" title="Home" />
</a>
</li>
<li>
<a href="login_register.php">
<img src="images/login_symbol.png" class="login_pic" title="Login" />
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event)">
<img src="images/drop_down.png" />
</a>
<div class="dropdown-content" id="myDropdown">
<a href="stay.php">Reservation</a>
<a href="feedback.php">Feedback</a>
<a href="about.php">Contact Us</a>
</div>
</li>
</ul>
</nav>
</div>
</header>(一般来说，在将来发布之前删除一些示例代码可能会很好)
这有帮助吗？
关于javascript - 单击菜单图标时不会打开下拉菜单，但当我单击离它有点远时会打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41410658/