如何使用javascript顯示隱藏/顯示菜單？

Question

該代碼正在運行，但並不完美。

---

當我單擊“Test1”時，結果：

測試-1

測試-2

---

問題是當我點擊“Test2”

單擊“Test1”時得到相同的結果

結果：

測試-1

測試-2

預期結果：

測試-3

測試-4

---

這是 HTML：

 function show() { var x = document.getElementById("showw"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function expand() { var y = document.getElementById("show-list"); if (y.style.display === "none") { y.style.display = "block"; } else { y.style.display = "none"; } }

 <h1 onclick="show()"> Menu </h1> <nav id="showw" style="display: none;" onclick="expand()"> <nav id="menuu"> Test1 <nav id="show-list" style="display: none;"> <p>test -1</p> <p>test -2</p> </nav> </nav> <nav id="menuu"> Test2 <nav id="show-list" style="display: none;"> <p>test -3</p> <p>test -4</p> </nav> </nav> </nav>

Answer 1

您的代碼有很多錯誤，首先是您有多個具有相同id元素。 ID 必須是唯一的，這就是為什么無論您單擊哪個菜單項，您總是會看到第一組選項——系統只希望找到一個具有給定id元素，因此當它找到它時，它會停止尋找其他元素.

從 HTML 的角度來看，您錯誤地使用了nav元素。 它們應該只用於包含導航的部分。

最后，您的代碼使用內聯事件處理和內聯樣式，應避免使用這兩種方式，因為這會使代碼更難以閱讀並促進代碼重復。 CSS 和 JavaScript 應該分開。

請參閱下面的內聯評論：

 // Do your event binding in JavaScript, not in HTML document.querySelector("h1").addEventListener("click", show); // Find all the "menu" elements and loop over them document.querySelectorAll(".menu").forEach(function(nav){ // Assign a click event handler to each nav.addEventListener("click", expand); }); function show(){ // Get all the menu elements and loop over them document.querySelectorAll("div.menu").forEach(function(item){ // Remove the "hidden" CSS class on the element, which will // cause it to be shown. No need to set display:block -- // just stop hiding it. item.classList.remove("hidden"); }); } function expand(){ // Get the child nav of the clicked menu and toggle the use of the "hidden" class this.querySelector("nav").classList.toggle("hidden"); }

 /* Use CSS classes instead of inline style attributes. This avoids messy duplication of code and is much easier to apply or remove the classes. */ /* Just add/or remove this class to hide or show an element */ .hidden { display:none; } .pointer { cursor:pointer; }

 <!-- Notice how there is no CSS or JavaScript in the HTML and how much more clean and simple it is to read? Also, see how there are no IDs on anything, just classes to help the JavaScript and CSS know how to find the right elements? --> <h1 class="pointer">Menu</h1> <div> <div class="menu hidden pointer">Test1 <nav class="hidden"> <ul> <li class="pointer">Test - 1</li> <li class="pointer">Test - 2</li> </ul> </nav> </div> <div class="menu hidden pointer">Test2 <nav class="hidden"> <ul> <li class="pointer">Test - 3</li> <li class="pointer">Test - 4</li> </ul> </nav> </div> </div>

Answer 2

編輯以改善答案這里是如何完成的：1）您不能將相同的ID分配給兩個不同的元素，它應該是一個類； 2）將expand（）調用添加到要擴展的兩個導航中； 3）在函數expand（）的調用中添加“ this”作為參數； 這樣一來，您無需手動提供其他參數即可傳遞元素； 4）在expand（）函數中，接受“ element”作為參數，然后從之前單擊並傳遞的nav元素中找到第一個.show-list。

 function show() { var x = document.getElementById("showw"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function expand(element) { var y = element.getElementsByClassName("show-list")[0]; if (y.style.display === "none") { y.style.display = "block"; } else { y.style.display = "none"; } } 

 <h1 onclick="show()"> Menu </h1> <nav id="showw" style="display: none;"> <nav id="menuu" onclick="expand(this)"> Test1 <nav class="show-list" style="display: none;"> <p>test -1</p> <p>test -2</p> </nav> </nav> <nav id="menuu" onclick="expand(this)"> Test2 <nav class="show-list" style="display: none;"> <p>test -3</p> <p>test -4</p> </nav> </nav> </nav> 

Answer 3

getElementById() 只找到第一個，所以 test2 不會受到影響。 現有答案的另一種選擇是獲取單擊事件的目標元素並對其進行更改。

改變這一行：

var y = document.getElementById("show-list");

通過這一行：

var y = event.target.firstElementChild;