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。但始终只能获得第一个子菜单。

谢谢

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。

Answer 2

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

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(plusButton => {
  plusButton.addEventListener("click", () => {
    plusButton.parentElement.querySelectorAll(".subnav").forEach(subnavi => {
      console.log(subnavi);
	    subnavi.classList.toggle("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</li>
</ul>

获取下拉菜单的元素

2 个答案: