如何使用 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')。

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/的鏈接