[英]Drop-down menu in navbar with Javascript not working
我正在復制代碼並可能更改w3schools 代碼。 Dropdown 2和Dropdown 3 button不起作用。
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (.e.target.matches('.dropbtn')) { var myDropdown = document;getElementById("myDropdown"). if (myDropdown.classList.contains('show')) { myDropdown.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; }.dropdown.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; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="navbar"> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown 1 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown 2 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown 3 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> </body> </html>
問題是您的所有 3 個下拉菜單都具有相同的id ，這是不允許的。 並且由於所有 3 個按鈕都使用相同的回調，並且該回調專門切換了該重用id的可見性，因此系統在找到第一個匹配元素時停止（因為首先不應該有多個具有相同id的元素） .
現實情況是，首先使用id ，雖然這似乎是一種簡單的方法，但會導致無法擴展的脆弱代碼（如您所見），因此請避免使用id並使用 CSS 類和 HTML 的層次結構元素作為查找元素的方法。
此外， 切勿使用getElementsByClassName()或內聯 HTML 事件屬性。
幫自己一個忙，盡可能遠離 W3 學校，因為眾所周知，有不完整、不准確或完全錯誤的信息。 相反，您將從Mozilla 開發者網絡 (MDN) 獲得更全面和最新的信息，他們是 JavaScript 語言的管理者。
有關詳細信息，請參閱下面的評論：
// Set your events up in JavaScript, not with HTML event attributes document.addEventListener("click", function(event) { // Loop over all the menus document.querySelectorAll(".dropdown-content").forEach(function(dd){ dd.classList.remove("show"); // Hide the menu }); // If the clicked element was a button if (event.target.classList.contains('dropbtn')) { // Show just the menu that corresponds to the clicked button event.target.nextElementSibling.classList.toggle("show"); } });
.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover {background-color: #ddd;}.show {display: block;}
<div class="dropdown"> <button class="dropbtn">Dropdown 1</button> <div class="dropdown-content"> <a href="#home">Home 1</a> <a href="#about">About 1</a> <a href="#contact">Contact 1</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown 2</button> <div class="dropdown-content"> <a href="#home">Home 2</a> <a href="#about">About 2</a> <a href="#contact">Contact 2</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown 3</button> <div class="dropdown-content"> <a href="#home">Home 3</a> <a href="#about">About 3</a> <a href="#contact">Contact 3</a> </div> </div>
你必須以某種方式區分你的菜單。 我使用了data-target屬性。 此外，您需要在顯示之前隱藏所有可見菜單。 關於按鈕外觀，只需根據自己的喜好更改 .dropbtn 的.dropbtn即可。
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(el) { var currentMenu = document.querySelector(".dropdown-content.show"); if (currentMenu) currentMenu.classList.toggle("show"); document.getElementById(el.dataset.target).classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }
.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #ddd; }.show { display: block; <div class="dropdown"> <button onclick="myFunction(this)" data-target="dropdown1" class="dropbtn">Dropdown 1</button> <div id="dropdown1" class="dropdown-content"> <a href="#home">Home 1</a> <a href="#about">About 1</a> <a href="#contact">Contact 1</a> </div> </div> <div class="dropdown"> <button onclick="myFunction(this)" data-target="dropdown2" class="dropbtn">Dropdown 2</button> <div id="dropdown2" class="dropdown-content"> <a href="#home">Home 2</a> <a href="#about">About 2</a> <a href="#contact">Contact 2</a> </div> </div> <div class="dropdown"> <button onclick="myFunction(this)" data-target="dropdown3" class="dropbtn">Dropdown 3</button> <div id="dropdown3" class="dropdown-content"> <a href="#home">Home 3</a> <a href="#about">About 3</a> <a href="#contact">Contact 3</a> </div> </div>
您可以使用.nextElementSibling ==> https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling
在你的情況下
const allButtons = document.querySelectorAll('button.dropbtn'); allButtons.forEach(btn=> { btn.onclick=()=>{ allButtons.forEach(btn_X=> { let divContent = btn_X.nextElementSibling if ( btn===btn_X) divContent.classList.toggle('show') else divContent.classList.remove('show') }) } }) // Close the dropdown if the user clicks outside of it window.onclick =e=> { if (e.target.matches('.dropbtn')) return allButtons.forEach(btn=>btn.nextElementSibling.classList.remove('show')) }
.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover {background-color: #ddd;}.show {display: block; }
<div class="dropdown"> <button class="dropbtn">Dropdown 1</button> <div class="dropdown-content"> <a href="#home">Home 1</a> <a href="#about">About 1</a> <a href="#contact">Contact 1</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown 2</button> <div class="dropdown-content"> <a href="#home">Home 2</a> <a href="#about">About 2</a> <a href="#contact">Contact 2</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown 3</button> <div class="dropdown-content"> <a href="#home">Home 3</a> <a href="#about">About 3</a> <a href="#contact">Contact 3</a> </div> </div>
JavaScript的下拉菜單無法與Chrome工作（事件問題？）
[英]javascript drop-down menu not working with Chrome (event issue?)
使用 Javascript 切換的導航欄漢堡的響應式下拉菜單適用於 Chrome、Firefox，但不適用於 Safari
[英]Responsive drop-down menu from burger of navbar using Javascript toggle works in Chrome, Firefox, but not Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.