使用HTML+CSS+JS实现下拉菜单时报Uncaught TypeError错误如何解决

安全阿岳

2026-10-1

问题排查与修复方案

错误原因

核心报错原因：document.querySelectorAll('.sidebar-ul')返回的是包含所有下拉菜单的NodeList集合，并非单个DOM元素，集合本身没有classList属性，直接调用classList.add会抛出类型错误。
逻辑问题1：没有关联点击按钮和对应的下拉菜单，原有写法试图操作所有下拉菜单，不符合单按钮控制对应菜单的需求。
逻辑问题2：e.target在点击事件触发时必然存在，原有if(clicked)判断完全失效，无法实现菜单展开/收起的切换效果。

修复代码

替换你的JavaScript代码为以下内容即可解决报错，同时实现点击按钮切换对应下拉菜单展开/收起的效果：

const sidebarBtn = document.querySelectorAll('.sidebar-btn');

sidebarBtn.forEach((btn) =>
  btn.addEventListener('click', function (e) {
    // 阻止a标签默认跳转顶部的行为
    e.preventDefault();
    // 获取当前点击按钮后紧跟的对应下拉菜单
    const targetUl = btn.nextElementSibling;
    // 切换show类实现展开收起
    targetUl.classList.toggle('show');
  })
);

可选优化（互斥展开效果）

如果需要实现点击当前菜单时自动关闭其他已经展开的菜单，可以使用以下代码：

const sidebarBtn = document.querySelectorAll('.sidebar-btn');
const allSidebarUl = document.querySelectorAll('.sidebar-ul');

sidebarBtn.forEach((btn) =>
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    const targetUl = btn.nextElementSibling;
    // 收起所有非当前点击的菜单
    allSidebarUl.forEach(ul => {
      if (ul !== targetUl) ul.classList.remove('show');
    })
    // 切换当前菜单状态
    targetUl.classList.toggle('show');
  })
);