javascript - 如何在打开另一个时关闭一个 Javascript 下拉菜单

Question

我不太熟悉 JavaScript，我希望能得到一点帮助来解决我似乎无法解决的问题。我目前在我的网站上有 2 个下拉菜单。一个是用于导航的下拉菜单，单击汉堡菜单图标时会激活该菜单。第二个下拉菜单用于显示我网站上的类别。目前，当我点击一个下拉菜单时，我必须再次点击它才能关闭它。如果我单击第二个下拉菜单而不关闭第一个下拉菜单，两者都将保持可见。我希望发生的是两件事。首先，我希望这样，如果用户单击 div 之外的任何位置以获取下拉菜单，它会自动关闭。我希望看到的第二件事是一次只显示一个下拉菜单。因此，如果我单击一个并且另一个下拉菜单打开，我希望它被关闭。希望我解释得很好。现在进入我正在使用的代码。

以下是我的想法。

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");  
}
</script>

然后我将其用作激活导航下拉菜单的按钮。这包含在我体内。

<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">&#9776; MENU</button>
</div>

这是我用来包含我的类别下拉菜单的内容。

<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>

现在最后是我偶尔使用的 css，它对任何人都有帮助。

/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown  */
.dropdown-content a {
color: #000000;
text-decoration: none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

那么什么是完成我所要求的最佳方法呢？有人能帮我一把，给我指明正确的方向吗？非常感谢，非常感谢您能提供给我的任何帮助。

Answer 1

onclick 属性不应包含 ()。它应该看起来像这样:

<button onclick="DropDownMenuNavigation" class="dropbtn">&#9776; MENU</button>

或者——甚至更好——不要将事件监听器内联，而是将其放在脚本中。

此外，在按下按钮时从另一个下拉列表中删除“show”类。

看这里:

document.getElementById('menudropbtn').addEventListener('click', function () {
	document.getElementById('b2DropDownMenuNav').classList.toggle('show')
  document.getElementById('b2DropDownMenuCat').classList.remove('show')
})

document.getElementById('categoriesdropbtn').addEventListener('click', function () {
	document.getElementById('b2DropDownMenuCat').classList.toggle('show')
  document.getElementById('b2DropDownMenuNav').classList.remove('show')
})

/* Dropdown Button */
.dropbtn {
  background-color: #0066a2;
  color: white;
  padding: 1px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.dropbtn a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0066a2;
  min-width: 260px;
  max-width: 960px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown  */
.dropdown-content a {
  color: #000000;
  text-decoration: none;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

<div class="dropbtn" style="float: left;">
  <button class="dropbtn" id="menudropbtn">&#9776; MENU</button>
  <div class="dropdown">
    <div class="dropdown-content" id="b2DropDownMenuNav">
      <a>Something</a>
    </div>
  </div>
</div>

<div class="dropbtn" style="float: left;">
  <button class="dropbtn" id="categoriesdropbtn">CATEGORIES</button>
  <div class="dropdown">
    <div class="dropdown-content" id="b2DropDownMenuCat">
      <a>Something else</a>
    </div>
  </div>
</div>