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

Question

I've been working with this for days. I can't really find the problem, I'm just new to JS btw, I'm searching for days too. I'm losing hope so I'm posting it here. I need multiple dropdown menu, and I supposedly just want to copy this code but this code don't work even in one menu.

 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

In your javascript code replace event.target.matches('.category-list') to 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');
            }
        }
    }
}

Here is the link to JSFiddle https://jsfiddle.net/r3v1ktp7/4/