关闭下拉菜单列表
[英]Close list of Dropdown Menu
问题描述
我有这个下拉菜单：
document.addEventListener("DOMContentLoaded", function(event) { allNameMuseums().forEach(function(item) { // ITERAZIONE document.getElementById("myDropdown").innerHTML += '<a onclick="updateData(this)">' + item + '</a>'; }) }); function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Museo1</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> </div> </div>
我希望当我单击下拉菜单列表中的一个项目时，该列表会自动关闭。
2 个解决方案
解决方案1
1 已采纳 2018-10-03 13:41:43
您需要的是从元素中删除“ show”类。
例：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus { outline: 3px solid #ddd; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; 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>Search/Filter 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"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about" onclick="select()">Item1</a> <a href="#base" onclick="select()">Item2</a> </div> </div> <script> function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } function select() { //Your item selection logic here... myFunction(); } </script> </body> </html>
解决方案2
1 2018-10-03 14:03:08
按照W3C学校的例子在这里 ：
您所缺少的是，在按钮之外单击时关闭下拉列表：
// 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');
}
}
}
}
请注意，此示例没有搜索栏，因此在此功能中，您还必须检查搜索栏以将其排除在关闭下拉菜单之外。
滚动时关闭下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.