打開另一個時如何關閉一個 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>

Answer 2

為此，您可以添加自定義 JS 函數，該函數將根據元素 ID 打開下拉列表，並且當打開一個下拉列表時，所有其他下拉列表都將關閉。 您可以創建一個關閉所有下拉菜單的函數。 然后，在您的“打開”函數中，首先調用“close_all”函數。

這是一個工作片段。

 // Functions for Interactive File Menu Bar // - Click Butoon to Open Dropdown // - Clicking one dropdown closes all other // - Clicking outside the file menu bar will close all the dropdown. function open_dropdown(element_id) { console.log('Opening Dropdown:', element_id) close_all_dropdowns() document.getElementById(element_id).style.display = 'block'; } // Close the dropdown if the user clicks outside of it function close_dropdown(element) { console.log('I am closing dropdown:', element) element.style.display = 'none' } // Close all dropdowns. function close_all_dropdowns() { var dropdowns = document.getElementsByClassName('dropdown-content') for (var i = 0; i < dropdowns.length; i++) { close_dropdown(dropdowns[i]); } } // Close all dropdowns when clicking outside. window.onclick = function (e) { if (!e.target.matches('.dropbtn')) { close_all_dropdowns() } }

 /* Styles for the File Menu Bar. */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/98.css"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <title>RetroNet</title> </head> <body> <div class="window" style="width: 100%"> <div class="title-bar"> <div class="title-bar-text">Welcome to RetroNet!</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <!-- Main menu --> <div class="window-body"> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_file')">File</button> <div class="dropdown-content" id="dd_file"> <a href="#">Open</a> <a href="#">Close</a> <a href="#">Settings</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_edit')">Edit</button> <div class="dropdown-content" id="dd_edit"> <a href="#">Cut</a> <a href="#">Copy</a> <a href="#">Paste</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_view')">View</button> <div class="dropdown-content" id="dd_view"> <a href="#">Toggle CSS</a> <a href="#">Toggle Javascript</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_tools')">Tools</button> <div class="dropdown-content" id="dd_tools"> <a href="#">Not Decided</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_favorite')">Favourties</button> <div class="dropdown-content" id="dd_favorite"> <a href="#">Add New Favorite</a> <a href="#">Add this Page to Favorites</a> <a href="#">Show Favorites</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="open_dropdown('dd_help')">Help</button> <div class="dropdown-content" id="dd_help"> <a href="https://github.com/ayushxx7/summer-code-jam-2020/blob/master/adventurous-anteaters/README.md">README</a> </div> </div> </div> </div> </body> </html>

Answer 3

也許以下代碼可以提供幫助。 您可以使用自定義事件讓模塊項目（如菜單、彈出窗口等）相互通信。

如果單擊菜單按鈕，則可以調度自定義事件。 頁面上的任何其他項目可能會根據此事件的內容執行某些操作（例如在打開主菜單時暫停游戲）。

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