Javascript 获取下拉菜单的元素

想要建立一个下拉菜单。单击时，子菜单应为切换显示子菜单

这是我的代码：

<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>

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

谢谢

查看和，您将能够获得：

如果使用带箭头的函数，关键字this将不会引用单击的plusButton。

查看和，您将能够获得：

如果使用带箭头的函数，关键字this将不会引用单击的plusButton。

可以使用parentElement和querySelectorAll解决此问题：

const toggle=document.queryselectoral.toggle； toggle.forEachplusButton=>{ plusButton.addEventListenerclick，=>{ plusButton.parentElement.querySelectorAll.subnav.forEachsubnavi=>{ console.logsubnavi； subnavi.classList.toggleshow-subnav； }; }; }; 首先+ Subnav I Subnav II Subnav III 第二+ Subnav I Subnav II Subnav III 第三 可以使用parentElement和querySelectorAll解决此问题：

const toggle=document.queryselectoral.toggle； toggle.forEachplusButton=>{ plusButton.addEventListenerclick，=>{ plusButton.parentElement.querySelectorAll.subnav.forEachsubnavi=>{ console.logsubnavi； subnavi.classList.toggleshow-subnav； }; }; }; 首先+ Subnav I Subnav II Subnav III 第二+ Subnav I Subnav II Subnav III 第三

---

从html来看，应该是这个.nextElementSibling.classList.toggle…哦，是的，我读得太快了。我会更正我的答案，但我忘了别的东西。编辑无需等待，是一个完美的孩子！我认为this.parentElement和nextElementSibling都在工作。从html来看，应该是这个.nextElementSibling.classList.toggle…哦，是的，我读得太快了。我会更正我的答案，但我忘了别的东西。编辑无需等待，是一个完美的孩子！我认为this.parentElement和nextElementSibling都在工作。

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");
  });
});

// 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>
});