如何使用 JavaScript 使这个下拉菜单工作？

Question

我已经为此工作了好几天。我真的找不到问题，顺便说一句，我只是 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">&nbsp;</i>Food & Beverage</li> 
       <li><i class="fas fa-pencil-ruler">&nbsp;</i>Stationery</li> 
       <li><i class="fas fa-laptop">&nbsp;</i>Internet Cafe</li> 
       <li><i class="fas fa-print">&nbsp;</i>Printing Services</li> 
      </ul>

     </div> 
    </div> 

Answer 1

在您的 javascript 代码中，将 event.target.matches('.category-list') 替换为 event.target.matches('.default-option')。

函数 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/的链接