javascript - 如何使用 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>

标签： javascripthtml

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>