如何关闭一个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() { 
 
\t document.getElementById('b2DropDownMenuNav').classList.toggle('show') 
 
    document.getElementById('b2DropDownMenuCat').classList.remove('show') 
 
}) 
 

 
document.getElementById('categoriesdropbtn').addEventListener('click', function() { 
 
\t 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>

Answer 2

也许下面的代码可以提供帮助。您可以使用自定义事件来使模块项目（如菜单，弹出窗口等）相互通信。

如果点击菜单按钮，则可以发送自定义事件。页面上的任何其他项目都可以根据此事件做些事情（例如打开主菜单时暂停游戏）。

// find menu-content in item (=menu-button) and return 
 
// "none" if menu-content.style.display is "block" 
 
// "block" if menu-content.style.display is not "block" 
 
const toggle = 
 
    (item) => { 
 
    const content = 
 
     item.querySelector("[x-role=\"menu-content\"]"); 
 
    return content.style.display === "block" 
 
     ? "none" 
 
     : "block" 
 
    } 
 
; 
 
// set menu-content found in item (=menu-button) to 
 
// none or block 
 
const changeDisplay = 
 
    (item,display) => 
 
    item.querySelector("[x-role=\"menu-content\"]") 
 
     .style.display = display; 
 
// when menu-button is clicked 
 
const menuButtonClicked = 
 
    e => { 
 
    //get the toggled content style 
 
    // if current style is block then 
 
    // toggled is none and vice versa 
 
    const style = toggle(e.target); 
 
    //hide all menus, in the for each we 
 
    // added an event listener for "menu-click" event 
 
    // the listener will hide the menu 
 
    var evt = new Event("menu-click",{}); 
 
    document.body.dispatchEvent(evt); 
 
    //set style of the current 
 
    changeDisplay(e.target,style); 
 
    } 
 
; 
 
//for each menu-botton role 
 
// I am not using css selectors on class, class is for style, 
 
// user defined properties can be used for behavior. 
 
// If you mix this up then you can break style, behavior 
 
// or both when changing behavior or style 
 
document.querySelectorAll("[x-role=\"menu-button\"]") 
 
    .forEach(
 
    x => { 
 
     //when clicked let menuButtonClicked handle it 
 
     x.addEventListener(
 
     "click" 
 
     ,menuButtonClicked 
 
    ); 
 
     //listen to custom event called "menu-click" 
 
     // set display to none when this happens 
 
     // if you were to dynamically add and remove 
 
     // menu items then you should remove the event 
 
     // listeners when you remove the menu 
 
     document.body.addEventListener(
 
     "menu-click" 
 
     ,e => changeDisplay(x,"none")   
 
    ); 
 
    } 
 
) 
 
;

.menu-button { 
 
    cursor: pointer; 
 
} 
 
.menu-content { 
 
    display:none; 
 
}

<div class="menu-button" x-role="menu-button"> 
 
menu1 
 
<div class="menu-content" x-role="menu-content"> 
 
    <ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    </ul> 
 
</div> 
 
</div> 
 
<div class="menu-button" x-role="menu-button"> 
 
menu2 
 
<div class="menu-content" x-role="menu-content"> 
 
    <ul> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    </ul> 
 
</div> 
 
</div> 
 
<div class="menu-button" x-role="menu-button"> 
 
menu3 
 
<div class="menu-content" x-role="menu-content"> 
 
    <ul> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    </ul> 
 
</div> 
 
</div>