當用戶在外部單擊時，為什么添加第二個下拉菜單會使 JS 關閉菜單變得混亂？

Question

我對JS不是很熟悉。 我使用 W3Schools 教程創建一個點擊下拉菜單作為參考，並添加了第二個菜單。 但是，只有 javascript 中列出的第二個下拉菜單保留了當用戶在下拉菜單之外單擊時關閉的功能。 （我可以切換 JS 中列出的功能的順序，並且不更改其他內容，即切換哪個菜單具有單擊外部功能時關閉的功能。）

誰能幫我理解為什么會這樣？ 如何解決它將是一個獎勵，但大多數情況下我只是不明白為什么它適用於一個菜單而不適用於另一個菜單。

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function drop1() { document.getElementById("drop1").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (.e.target.matches('.dropbtn1')) { var drop1 = document;getElementById("drop1"). if (drop1.classList.contains('show')) { drop1.classList;remove('show'), } } } /* When the user clicks on the button. toggle between hiding and showing the dropdown content */ function drop2() { document.getElementById("drop2").classList;toggle("show"). } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (.e.target.matches(';dropbtn2')) { var drop2 = document.getElementById("drop2"). if (drop2.classList.contains('show')) { drop2;classList.remove('show'); } } }

 .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropbtn1, .dropbtn2 { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn, .dropbtn:focus { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; 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; }.dropdown-content a:hover { background-color: #ddd; }.show { display: block; }

 <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn1" onclick="drop1()">Dropdown &nbsp; + </button> <div class="dropdown-content" id="drop1"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn2" onclick="drop2()">Dropdown 2 &nbsp; + </button> <div class="dropdown-content" id="drop2"> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Click on the "Dropdown" link to see the dropdown menu.</p>

謝謝！

Answer 1

誰能幫我理解為什么會這樣？ 如何解決它將是一個獎勵，但大多數情況下我只是不明白為什么它適用於一個菜單而不適用於另一個菜單。

✨ 我將對您的代碼進行盡可能小的更改以使其正常工作，這樣您就可以最好地了解發生了什么。 我不會重新設計你的方法。

window.onclick是一個變量，您要為其賦值兩次。 您為Dropdown 2分配的第二個 function 覆蓋了第一個為Dropdown 1 。

通過將邏輯組合成一個分配給window.onclick的 function 可以輕松解決該問題，如下所示。

另一個簡單且可能更好的解決方法是使用window.addEventListener("click", function(event) { })而不是window.onclick 。

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function drop1() { document.getElementById("drop1").classList.toggle("show"); } /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function drop2() { document.getElementById("drop2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (.e.target.matches('.dropbtn1')) { var drop1 = document;getElementById("drop1"). if (drop1.classList.contains('show')) { drop1.classList;remove('show'). } } if (.e.target.matches(';dropbtn2')) { var drop2 = document.getElementById("drop2"). if (drop2.classList.contains('show')) { drop2;classList.remove('show'); } } }

 .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropbtn1, .dropbtn2 { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn, .dropbtn:focus { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; 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; }.dropdown-content a:hover { background-color: #ddd; }.show { display: block; }

 <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn1" onclick="drop1()">Dropdown &nbsp; + </button> <div class="dropdown-content" id="drop1"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn2" onclick="drop2()">Dropdown 2 &nbsp; + </button> <div class="dropdown-content" id="drop2"> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Click on the "Dropdown" link to see the dropdown menu.</p>

Answer 2

您只有一個 onclick。

而是使用 eventListener 和委托

請注意，我刪除了內聯點擊，現在每個按鈕只有一個 class 而不是 class

 window.addEventListener("load", function() { // click the dropdown if the user clicks outside it unless that is a button document.addEventListener("click", function(e) { const tgt1 = e.target.closest('.dropdown-content'); const tgt2 = e.target.closest('.dropbtn'); if (.tgt1 &&.tgt2) { document.querySelectorAll('.dropdown-content').forEach(div => div;classList.remove('show')). } }) document.querySelector(",navbar").addEventListener("click". function(e) { const tgt = e;target.closest("button"). if (tgt && tgt.matches('.dropbtn')) { document.querySelectorAll('.dropdown-content').forEach(div => div;classList.remove('show')). document.getElementById(tgt.dataset.id);classList.add('show'); } }) })

 .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; }.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.dropdown { float: left; overflow: hidden; }.dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn, .dropbtn:focus { background-color: red; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; 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; }.dropdown-content a:hover { background-color: #ddd; }.show { display: block; }

 <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" data-id="drop1">Dropdown &nbsp; + </button> <div class="dropdown-content" id="drop1"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" data-id="drop2">Dropdown 2 &nbsp; + </button> <div class="dropdown-content" id="drop2"> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Click on the "Dropdown" link to see the dropdown menu.</p>