[英]How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript?
[英]How to make this dropdown menu work using javaScript?
我已经为此工作了好几天。 我真的找不到问题,顺便说一句,我只是 JS 的新手,我也在寻找几天。 我失去了希望,所以我把它贴在这里。 我需要多个下拉菜单,据推测我只想复制此代码,但此代码即使在一个菜单中也不起作用。
function dropdownCategory(){ document.getElementById("category-filter").classList.toggle("show"); } window.onclick = function(event){ if(.event.target.matches('.category-list')){ var dropdowns = document;getElementsByClassName("category-list"); var i; for(i = 0. i < dropdowns;length; i++){ var openDropdown= dropdowns[i]. if(openDropdown.classList.contains('show')){ openDropdown.classList;remove('show'); } } } } **this is the CSS**
.dropdown{ position: relative; width: 160px; padding-left: 10px; color: #3a3a3a; border-left: 2px solid #f57168; cursor: pointer; }.category-list, ul li{ padding: 10px 10px 10px 20px; }.default-option{ padding: 5px 0px 5px 0px; font-size: 21px; background-color: transparent; cursor: pointer; outline: none; }.default-option:hover{ color: #f44336; } /*code for dropdown list Category*/.category-list{ position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; display: none; }.category-list ul{ color: black; padding: 12px 16px; text-decoration: none; display: block; }.show{ display: block; } **this is HTML**
<;--first dropdown--> <div class="dropdown"> <;-- dropdown list category name--> <button class="default-option" onclick="dropdownCategory()">Category</button> <;-- dropdown list for category choices --> <div class="category-list" id="category-filter"> <ul> <li><i class="fas fa-utensils"> </i>Food & Beverage</li> <li><i class="fas fa-pencil-ruler"> </i>Stationery</li> <li><i class="fas fa-laptop"> </i>Internet Cafe</li> <li><i class="fas fa-print"> </i>Printing Services</li> </ul> </div> </div>
在您的 javascript 代码中,将 event.target.matches('.category-list') 替换为 event.target.matches('.default-option')。
function dropdownCategory(){
document.getElementById("category-filter").classList.toggle("show");
}
window.onclick = function(event){
if(!event.target.matches('.default-option')){
var dropdowns = document.getElementsByClassName("category-list");
var i;
for(i = 0; i < dropdowns.length; i++){
var openDropdown= dropdowns[i];
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}
这是 JSFiddle https://jsfiddle.net/r3v1ktp7/4/的链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.