stackoom
  简体   繁体   中英

The drop down doesent open on clicking on the menu icon but opens when i click a bit far from it

 原文  2016-12-31 18:04:49  4   1    javascript/ html/ css

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. 

 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>

1 answers

solution1
 0 ACCPTED  2016-12-31 20:09:22

Shashwat,

The problem here is that when you click on the icon, your window.onclick() function is undoing the css changes from that click.

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.
  • The event then bubbles up to the window.onclick handler, the target matches .dropbtn and so it does nothing.

In the bad case:

  • Click on the img.
  • Event does nothing on that element, and so bubbles up to the a.dropbtn
  • the onclick handler on a.dropbtn is triggered, the show class is added.
  • The event bubbles up to 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. 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. 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?

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML drop down menu won't stay open when clicking on it Drop down menu when click on the icon- ReactJS Javascript - On click of icon show drop down menu How I can set drop down menu when click on check box of parent then open the sub list of parent? How Do I set drop down menu list open when I click on parent li Then open the sub li using javascript? Hide the drop down menu when clicking outside Clicking drop down opens the wrong dtop down hover state not remain fixed when a drop down menu opens? How do I make a drop down menu close as another from the same class opens in jquery / javascript? My drop down menu only opens if I am fast enough
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM