0

我正在尝试制作一个单击时折叠的菜单。我还想在同一功能上添加更多更改。例如，我想更改另一个对象的背景。

在此代码段中，您可以看到它仅适用于第一个链接。其他可切换链接不是目标。 

var pill = document.querySelector(".navpill");
var sub = document.querySelector(".submenu");
pill.onclick = () => {
    sub.classList.toggle("collapse");
    pill.classList.toggle("active");
}
.mainmenu {
  background-color: #1f1f1f;
}
.navpill {
  padding: 15px;
}
.navpill.active {
  background: red;
}
.navpill a {
  text-decoration: none;
  color: white;
}
.submenu {
  display: none;
}
.submenu.collapse {
  display: block;
}
<div>
  <ul class="mainmenu">
    <li class="navpill"><a href="#">Link collapse 1</a>
        <ul class="submenu">
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
        </ul>
    </li>
    <li class="navpill"><a href="#">Link collapse 2</a>
        <ul class="submenu">
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
            <li class="navpill"><a href="#">sub Link 1</a></li>
        </ul>
    </li>
    <li class="navpill"><a href="#">no link</a></li>
    <li class="navpill"><a href="#">no link</a></li>
  </ul>
</div>

从先前的答案中，我得到了这段代码，它可以在所有链接上运行，但我不知道如何添加更多 var 并切换到函数。

var pills = document.querySelectorAll(".expand");

pills.forEach(function(pill) {
  pill.onclick = () => {
    var sub = pill.querySelector(".submenu");
    sub.classList.toggle("collapse");
  }
});

我尝试将此添加到代码中，但它不起作用。

    var navpill = pill.querySelector(".navpill");
    navpill.classList.toggle("active");

如果可能的话，我还想要一种方法来清除单击下一个子菜单时所做的事情。

如果我使用上面的代码。当我单击第二个链接时，它保持打开状态，然后它们都打开了。如果单击第二个，我希望第一个关闭。

4

1 回答 1

1

我认为这可能更接近你想要的。

（目前尚不清楚您是否希望在单击子菜单项时突出显示它们 - 目前，单击它们只会折叠菜单，因此您不会看到。此外，我删除了 href，因为它们没有添加任何有用的东西。）

var pills = document.querySelectorAll(".expand");
var subs = document.querySelectorAll(".submenu");

pills.forEach(function(pill) {
  pill.addEventListener("click", function() {
    var sub = pill.querySelector(".submenu");
    
    var alreadyOpen = false;
    if (sub.classList.contains("collapse")) alreadyOpen = true;
    
    pills.forEach(function(pill2) {
      pill2.classList.remove("active"); 
    });

    subs.forEach(function(sub2) {
      sub2.classList.remove("collapse"); 
    });

    if (!alreadyOpen) { 
      sub.classList.toggle("collapse");
      this.classList.add("active");
    }
  });
});
.expand.active {
  background-color: red;
}

.expand.active > .submenu
{
  background-color: #1f1f1f;
}

.mainmenu {
  background-color: #1f1f1f;
}

.navpill {
  padding: 15px;
  color: white;
}

.submenu {
  display: none;
}

.submenu.collapse {
  display: block;
}
<div>
  <ul class="mainmenu">
    <li class="navpill expand">Link collapse 1
      <ul class="submenu">
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
      </ul>
    </li>
    <li class="navpill expand">Link collapse 2
      <ul class="submenu">
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
        <li class="navpill">sub Link 1</li>
      </ul>
    </li>
    <li class="navpill">no link</li>
    <li class="navpill">no link</li>
  </ul>
</div>

于 2021-02-03T09:10:34.320 回答