下拉菜单在单击菜单图标时便会打开，但在我单击距离较远时会打开

Question

Drop Down Not opening after clicking on the menu icon 下拉菜单中单击菜单图标后未打开

I'm making a hotel management website in which i have three list items in the navigation bar one of them is the drop down menu icon.The problem is that this menu icon doesent open on clicking on it but it does if i click a bit far from it.Donno whats the error behind this,have been trying to rectify this for hours now.Any sort of help would be great.Thanks. 我正在制作一个酒店管理网站，其中导航栏中有三个列表项，其中一个是下拉菜单图标。问题是此菜单图标在单击时确实打开，但是如果我单击一下就可以Donno背后的错误是什么，现在已经尝试纠正了几个小时。任何帮助都将是巨大的。谢谢。

 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>

Answer 1

Shashwat, Shashwat，

The problem here is that when you click on the icon, your window.onclick() function is undoing the css changes from that click. 这里的问题是，当您单击图标时，您的window.onclick（）函数正在撤消该单击的css更改。

Here's the walkthrough of the good case: 这是好案例的演练：

Click to the edge of the icon. 单击图标的边缘。
This hits the a.dropbtn element, and so the onclick() handler is fired and the 'show' class is added. 这将命中a.dropbtn元素，因此将触发onclick（）处理函数并添加“ show”类。
The event then bubbles up to the window.onclick handler, the target matches .dropbtn and so it does nothing. 然后，事件冒泡到window.onclick处理程序，目标匹配.dropbtn，因此它什么也不做。

In the bad case: 在最坏的情况下：

Click on the img. 单击img。
Event does nothing on that element, and so bubbles up to the a.dropbtn 事件对该元素没有任何作用，因此会上升到a.dropbtn
the onclick handler on a.dropbtn is triggered, the show class is added. 触发a.dropbtn的onclick处理程序，添加show类。
The event bubbles up to window.onclick. 事件冒泡到window.onclick。 in this case, the target is the img, not the a.dropbtn, so !e.target.matches('.dropbtn') is true, and the show is removed. 在这种情况下，目标是img，而不是a.dropbtn，因此！e.target.matches（'。dropbtn'）为true，并且删除了演出。 Thus, the dropdown menu is removed as quickly as it is added. 因此，下拉菜单一被添加就被删除。

One fix for this would be to add an event.e.stopPropagation() call to your click handler. 一种解决方法是向您的点击处理程序添加一个event.e.stopPropagation（）调用。 Something like as follows: 如下所示：

 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>

(in general, it might be nice to strip down some of your sample code before posting it here in the future) （通常，最好删除一些示例代码，然后再在此处发布）

Does this help? 这有帮助吗？

下拉菜单在单击菜单图标时便会打开，但在我单击距离较远时会打开

问题描述

Drop Down Not opening after clicking on the menu icon 下拉菜单中单击菜单图标后未打开

1 个解决方案

解决方案1
0 已采纳 2016-12-31 20:09:22

下拉菜单在单击菜单图标时便会打开，但在我单击距离较远时会打开

问题描述

Drop Down Not opening after clicking on the menu icon 下拉菜单中单击菜单图标后未打开

1 个解决方案

解决方案1 0 已采纳 2016-12-31 20:09:22

解决方案1
0 已采纳 2016-12-31 20:09:22