当另一个打开时下拉菜单关闭

Question

How do I get all open drop downs to close when I open a new one. Individually they open and close as I want, but would like there to be only one open at a time.

I have now added the html and css. i have just used a simple list with buttons.

 var dropdown = document.getElementsByClassName("menu-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } 

 #dropdown-menu { display: none; margin: 0; border-style: none; list-style: none; width: 181px; text-align: left; border-bottom: 1px solid #2f3437; padding: 0; } #dropdown-menu button { background: #7689a3; border-top: 1px solid #94a3b8; border-bottom: 1px solid #52637a; border-right: 1px solid #94a3b8; color: #f3f2f2; display: block; margin: 0; padding: 8px 12px 8px 28px; } .dropdown-btn { border-style: none; color: #e6e5e5; display: block; margin: 0; width: 181px; text-align: left; font: 88% "Arial", Arial, Helvetica, sans-serif; } 

 <div class="side-nav"> <ul id="menu"> <li><button class="menu-btn" >ORDERS<i class="fas fa-shopping-cart icon-right"></i></button> <ul id="dropdown-menu"> <li><button class="dropdown-btn" onclick="view_orders()">View orders</button></li> <li><button class="dropdown-btn" title="Manage-orders">Manage orders</a></li> <li><button class="dropdown-btn" title="Enter-new-order">Enter new order</a></li> </ul> </li> 

Answer 1

This JavaScript code closes any opened dropdowns when another one is being opened, and can also close the single opened dropdown to get them all closed:

var activeDropdown = null;
var dropdowns = document.getElementsByClassName("menu-btn");

for(var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener("click", function(event) {
        event.target.classList.add("active");
        if(activeDropdown) {
            // If there is an opened dropdown, close it
            activeDropdown.classList.remove("active");
            activeDropdown = null;
        } else {
            activeDropdown = event.target;
        }
    });
}

But make sure the following CSS is added:

.menu-btn.active ~ #dropdown-menu {
    display: block !important;
}

Answer 2

There are several ways to get there. But here I propose two nested loops, it works too. The second loop always checks for unclipped items to hide them. You have to do like this:

 var dropdown = document.getElementsByClassName("menu-btn"); var i; var n; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { for(n=0; n<dropdown.length;n++){ var equal = this == dropdown[n]; if(equal === false){ dropdown[n].nextElementSibling.style.display = "none"; } } this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } 

 #dropdown-menu { display: none; margin: 0; border-style: none; list-style: none; width: 181px; text-align: left; border-bottom: 1px solid #2f3437; padding: 0; } #dropdown-menu button { background: #7689a3; border-top: 1px solid #94a3b8; border-bottom: 1px solid #52637a; border-right: 1px solid #94a3b8; color: #f3f2f2; display: block; margin: 0; padding: 8px 12px 8px 28px; } .dropdown-btn { border-style: none; color: #e6e5e5; display: block; margin: 0; width: 181px; text-align: left; font: 88% "Arial", Arial, Helvetica, sans-serif; } 

 <div class="side-nav"> <ul id="menu"> <li><button class="menu-btn" >ORDERS<i class="fas fa-shopping-cart icon-right"></i></button> <ul id="dropdown-menu"> <li><button class="dropdown-btn" onclick="view_orders()">View orders</button></li> <li><button class="dropdown-btn" title="Manage-orders">Manage orders</a></li> <li><button class="dropdown-btn" title="Enter-new-order">Enter new order</a></li> </ul> </li> <li><button class="menu-btn" >ORDERS 2<i class="fas fa-shopping-cart icon-right"></i></button> <ul id="dropdown-menu"> <li><button class="dropdown-btn" onclick="view_orders()">View orders</button></li> <li><button class="dropdown-btn" title="Manage-orders">Manage orders</a></li> <li><button class="dropdown-btn" title="Enter-new-order">Enter new order</a></li> </ul> </li> </ul> </div>