Question

当我打开一个新的下拉菜单时，如何关闭所有打开的下拉菜单。他们各自会按我的意愿打开和关闭，但希望一次只能打开一个。

我现在添加了html和CSS。我刚刚使用了一个带有按钮的简单列表。

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

此JavaScript代码会在打开另一个下拉菜单时关闭所有打开的下拉菜单，也可以关闭单个打开的下拉菜单以将其全部关闭：

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;
        }
    });
}

但是请确保添加了以下CSS：

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

Answer 2

有几种方法可以到达那里。但是在这里，我提出了两个嵌套循环，它也可以工作。第二个循环始终检查未剪切的项目以将其隐藏。您必须这样做：

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>

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

2 个答案: