如何在打开另一个Javascript下拉菜单时关闭它 [英] How to Close One Javascript Drop Down Menu When Opening Another

问题描述

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

I'm not to familiar with JavaScript and I was hoping to get a little help with a problem I can't seem to fix. I currently have 2 Drop Down Menus on my website. One is a drop down menu for the navigation which is activated when clicking a hamburger menu icon. The second drop down is being used to show categories on my website. Currently when I click one drop down, I have to click it again in order to close it. If I click the second drop down without closing the first both will remain visible. What I would like to happen is two things. First I would like it so that if a user clicks anywhere outside of the div for the drop down menu it automatically closes. The second thing I would like to see happen is only have one drop down menu visible at a time. So if I click one and another drop down is open I want it to be closed. Hopefully I explained this well. Now onto the code I'm using.

下面是我的脑海.

<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>

然后我将其用作激活导航下拉菜单的按钮.这是我的身体.

Then I use this as the button to activate the navigation drop down menu. This is included within my body.

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

这就是我用来添加类别下拉菜单的内容.

and this what I use to include my category drop down menu.

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

现在最后是我使用css的机会了，对任何人都有帮助.

Now lastly is the css I use just on the off chance that helps any.

/* 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;} 

那么做我要问的最好的方法是什么?有人可以帮我一下，指出正确的方向吗?非常感谢，感谢您能为我提供的任何帮助.

So what would be the best method to go about doing what I'm asking? Could someone maybe lend me a hand and point me in the right direction. Thanks a lot and I appreciate any help you could lend me.

推荐答案

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

The onclick attribute shouldn’t include the (). It should look like this:

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

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

Or—even better—don’t put the event listener inline, put it in the script.

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

Also, remove the "show" class from the other dropdown when the button is pressed.

在这里看到:

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>

这篇关于如何在打开另一个Javascript下拉菜单时关闭它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！