原生HTML+JS手风琴下拉菜单仅首个可展开问题求助

核心问题点 #

• 你使用的document.querySelector('.accordion_box li ul')仅会匹配文档中第一个符合规则的元素，因此无论点击哪个菜单标题，永远只会操作第一个菜单的下拉列表，这是导致其余菜单无法正常展开的核心原因。
• 代码逻辑和CSS规则存在冲突：你CSS中同时定义了.drop_list控制隐藏、.accordion_box li.active ul控制显示两种逻辑，但JS仅切换drop_list类，逻辑没有对齐。
• 循环变量使用var声明存在变量提升的遗留问题，属于不规范写法，容易引发其他边界错误。

修复方案 #

方案1：匹配CSS原有active逻辑（推荐，方便实现手风琴互斥效果） #

调整JS代码如下，无需修改现有CSS：

const headings = document.querySelectorAll(".drop_title");

headings.forEach(heading => {
  heading.addEventListener("click", function() {
    // 定位当前点击标题的父级li容器
    const currentLi = this.parentElement;
    // 切换父级的active类，匹配CSS的显示规则
    currentLi.classList.toggle('active');

    // 如果需要点击当前菜单时自动关闭其他已展开菜单，可取消注释下方代码
    // headings.forEach(otherHeading => {
    //   const otherLi = otherHeading.parentElement;
    //   if (otherLi !== currentLi) otherLi.classList.remove('active');
    // })
  })
})

方案2：直接操作下拉列表类（无需修改逻辑匹配规则） #

如果你希望保留原JS的drop_list切换逻辑，调整代码如下即可：

const headings = document.querySelectorAll(".drop_title");

headings.forEach(heading => {
  heading.addEventListener("click", function() {
    // 定位当前点击标题紧邻的下拉列表元素
    const currentList = this.nextElementSibling;
    currentList.classList.toggle('drop_list');
  })
})

内容的提问来源于stack exchange，提问作者CodeGirl