Close dropdown menu after click outside of navbar using only JavaScript?
Question
I want to make a drop-down menu which one is very simple and when after click outside of nav its automatically hide. note I already make drop-down menu but... I don't understand how to close it. here is my HTML and javascript code.
<section class="dropdownone"> <div class="container"> <h1>Dropdown One</h1> <li class="MajorDropOne"> <a href="#"> <button type="button" class="btn btn-primary dropOnebtn">Click Dropdown</button> </a> <ul class="dropOne"> <li>home</li> <li>about</li> <li>profile</li> </ul> </li> </div> </section>
1 answers
solution1
1 2018-07-03 08:05:25
Using JavaScript :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Profile</a> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </body> </html>
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
outside click dropdown menu not close
close dropdown menu on click outside
click outside burger menu to close using javascript
Click Outside To close Dropdown Avatar Menu
onclick dropdown menu with a form, click outside to close
How to close the Bootstrap navbar dropdown when the user clicks outside the menu?
Create dropdown menu on click and close menu when clicked outside with Vanilla Javascript
why not close dropdown when click outside in javascript
Dropdown-menu to close on click outside / hover outside
Click outside to close dropdown only works when click outside <nav>
Related Tags