如何關閉一個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>