下拉不开放点击菜单图标后

我做酒店管理的网站中，我有导航栏中的三个列表项是其中的一个是下拉菜单图标。问题是，此菜单图标doesent点击它时打开，但它确实如果我点击它离它很远。不知道什么是这背后的错误，有一直试图纠正这个小时now.Any帮助将是伟大的。谢谢。下拉doesent开上点击菜单图标，但是当我点击了一下，从它打开远

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>

来源

2016-12-31 Shashwat

Shashwat，

这里的问题是，当你点击该图标，您window.onclick（）函数撤消从点击的CSS变化。

这里是很好的案例的演练：

点击图标的边缘。
这会触发a.dropbtn元素，因此会触发onclick（）处理程序并添加'show'类。
然后，事件会冒泡到window.onclick处理程序，目标匹配.dropbtn，因此它什么也不做。

在不好的情况下：

点击IMG。
事件对该元素没有做任何事情，所以冒泡到a.dropbtn
a.dropbtn上的onclick处理程序被触发，show class被添加。
事件冒泡到window.onclick。在这种情况下，目标是img，而不是a.dropbtn，因此！e.target.matches（'。dropbtn'）为true，并且显示被删除。因此，下拉菜单会在添加后尽快删除。

对此的一个解决方法是将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>

（在一般情况下，它可能是好的，在未来在这里张贴之前剥离下来的一些示例代码）

这是否帮助？

来源

2016-12-31 20:09:22 David

是的，它肯定有帮助，非常感谢大卫帮助我用这段代码。是的，我会确保我未来的帖子只包含代码的有用部分。再次感谢。 – Shashwat

下拉doesent开上点击菜单图标，但是当我点击了一下，从它打开远

下拉不开放点击菜单图标后

回答

相关问题