切换菜单使用JavaScript.目标多个变量与1点击功能

Question

我正在尝试制作一个菜单，在点击时崩溃。我还想在相同的函数上增加一些变化。例如，我想改变另一个对象的背景。

在这个片段中，你可以看到它只对第一个链接起作用。另一个可切换链接不是目标。

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

如果可能的话，我也想清除什么已经做了当点击下一个子菜单的方式。

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

Answer 1

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

(目前还不清楚你是否想让子菜单项在点击时高亮显示——目前，点击它们只会使菜单崩溃，这样你就看不到了。此外，我删除了hrefs，因为它们没有添加任何有用的东西。

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>