仅使用JavaScript在导航栏外部单击后关闭下拉菜单吗？
[英]Close dropdown menu after click outside of navbar using only JavaScript?
问题描述
我想制作一个下拉菜单，该菜单非常简单，在导航栏外部单击后，它会自动隐藏。 请注意，我已经制作了下拉菜单，但是...我不知道如何关闭它。 这是我的HTML和javascript代码。
<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 个解决方案
解决方案1
1 2018-07-03 08:05:25
使用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>
用户在菜单外单击时如何关闭Bootstrap导航栏下拉菜单？
[英]How to close the Bootstrap navbar dropdown when the user clicks outside the menu?
使用 Vanilla Javascript 在外部单击时在单击时创建下拉菜单并关闭菜单
[英]Create dropdown menu on click and close menu when clicked outside with Vanilla Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.