javascript - 获取下拉菜单的元素

Question

想要建立一个下拉菜单。在“单击”时，子菜单应切换为“show-subnav”。

这是我的代码:

<ul class="mainnav">
  <li>First<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Second<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Third</>
</ul>

这是我的 JavaScript:

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(plusButton => {
  plusButton.addEventListener("click", () => {
    // How could I get the child from the mainnav li 
    // to toggle a class like:
    subnavi.classList.toggle("show-subnav");
  });
});

我想将一个类切换到特定的子菜单-ul。但始终只获取第一个子菜单-ul。

谢谢

Answer 1

看看Node.parentElement和 parentNode.children , 你将能够得到你的 <ul> :

// Inside your forEach()
plusButton.addEventListener("click", function () {
    // Get parent <li> of plusButton
    let li = this.parentElement,

    // Get <li> children (so <ul> should be in it right?)
        liChildren = li.children;

    // Filters liChildren to get your <ul>
});

关键词this不会引用被点击的 plusButton如果您使用带箭头的函数。