我的js脚本是在侧边栏菜单上的选择之间切换“活动”类，但只允许对第一个选择进行切换。

Question

我的问题是我只能在我的第一个“侧菜单”div上切换“活动”类，而不是其他的。请看一下我的密码，让我知道出了什么问题。

当活动时，左边会有一个跨度，显示它是当前的选择，请参考附加的图像。

HTML脚本

            <div class="sidebar">
            <div class="side-menu">
                <a class="side-option" href="#beverages"><img src="images/beverage.png" alt=""></a>
                <p>Beverages</p>
            </div>
            <div class="side-menu">
                <a class="side-option" href="#burger"><img src="images/burger2.png" alt=""></a>
                <p>Burger</p>
            </div>
            <div class="side-menu">
                <a class="side-option" href="#pizza"><img src="images/pizza1.png" alt=""></a>
                <p>Pizza</p>
            </div>
            <div class="side-menu">
                <a class="side-option" href="#pasta"><img src="images/pasta2.png" alt=""></a>
                <p>Pasta</p>
            </div>
            <div class="side-menu">
                <a class="side-option" href="#sides"><img src="images/sides1.png" alt=""></a>
                <p>Sides</p>
            </div>
            <div class="side-menu">
                <a class="side-option" href="#desserts"><img src="images/desserts1.png" alt=""></a>
                <p>Desserts</p>
            </div>
        </div>

CSS脚本

.side-menu.active p::after{
content: '';
background-color: var(--clr-primary);
width: 10px;
height: 100px;
position: absolute;
left: 0px;
top: 5px;

JS脚本

let sidemenu = document.querySelector('.side-menu')
let fbg = document.querySelector('.food-box-grid')
sidemenu.onclick=function(){
  sidemenu.classList.toggle('active')
  fbg.classList.toggle('active')
}

我可以切换活动类的“饮料”，但不能在其他选项，如汉堡，披萨.

Answer 1

根据MDN

querySelector()返回与指定选择器匹配的文档中的第一个元素

您希望使用querySelectorAll()，然后迭代输出并切换每个元素的类。

就像这样

let sidemenu = document.querySelectorAll('.side-menu')
let fbg = document.querySelectorAll('.food-box-grid')
sidemenu.onclick=function(){
  sidemenu.forEach((i) => {
    i.classList.toggle("active")
  })
  fbg.forEach((i) => {
    i.classList.toggle("active")
  })
}