如何使用JavaScript判断元素是否包含指定class并移除该类

代码问题排查 #

• document.getElementsByClassName('dropdown')返回的是DOM元素集合，不是单个DOM对象，直接调用drop.classList会直接抛出类型错误，是代码无法运行的核心原因
• 存在语法错误：if判断块未闭合、事件监听回调和for循环的右括号配对错误，浏览器无法正常解析代码
• 逻辑匹配错误：点击.faculties节点时，应该操作当前点击节点下的对应.dropdown元素，而不是全局所有下拉元素

基础修复代码 #

你可以直接用以下代码替换原有JS逻辑，实现点击对应菜单展开/收起下拉的效果：

const linkList = document.querySelectorAll('.faculties');

linkList.forEach(link => {
  link.addEventListener('click', () => {
    // 定位当前点击菜单下的下拉元素
    const currentDropdown = link.querySelector('.dropdown');
    // 自动切换show类，无需额外判断是否存在
    currentDropdown.classList.toggle('show');
  });
});

请确保你的CSS中已经配置了基础样式：

.dropdown {
  display: none;
}
.dropdown.show {
  display: block;
}

拓展优化（可选） #

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

const linkList = document.querySelectorAll('.faculties');

linkList.forEach(link => {
  link.addEventListener('click', () => {
    const currentDropdown = link.querySelector('.dropdown');
    // 关闭所有其他已展开的下拉
    document.querySelectorAll('.dropdown.show').forEach(drop => {
      if (drop !== currentDropdown) drop.classList.remove('show');
    });
    // 切换当前下拉的状态
    currentDropdown.classList.toggle('show');
  });
});

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