原生JS实现Bootstrap下拉菜单联动Div显隐时的重置与样式问题排查

现有代码的核心故障定位 #

• 批量选择器匹配失效：JS中通过document.querySelectorAll('.SAform')查找待重置的Div，但你给三个内容Div设置的类是SAformX/SAformY/SAformZ，完全不匹配.SAform选择规则，返回的是空元素集合，重置循环从未真正执行，所以已经显示过的Div不会被重新隐藏。
• 类名操作逻辑缺陷：直接给item.className赋值会完全覆盖元素上的所有原有类，后续添加的Bootstrap工具类（如间距、边框、背景类）会被全部清除，没有办法兼容后续的样式扩展。
• 样式规则不完整：目前只定义了.hidden的隐藏样式，没有配套的显示状态规则，切到显示状态时本质是靠移除隐藏属性生效，没有形成闭环的类控制逻辑。

可直接复用的正确实现 #

1. 修正HTML结构（仅需调整类标识） #

给所有需要做显隐切换的内容Div添加一个统一的标识类SAform，作为JS批量操作的选择依据，原有自定义类可以全部保留：

<!-- 原下拉菜单代码保持不变，仅修改三个内容Div的类名 -->
<div id="1" class="SAform SAformX hidden" style="background-color:red;">
  <p>gergeyherghdesghderh</p>
</div>
<div id="2" class="SAform SAformY hidden" style="background-color:blue;">
  <p>gergeyherghdesghderh</p>
</div>
<div id="3" class="SAform SAformZ hidden" style="background-color:green;">
  <p>gergeyherghdesghderh</p>
</div>

2. 调整基础样式 #

保持.hidden类的控制逻辑，可根据布局需求选择隐藏方式：

/* 若需要隐藏元素保留页面占位，保留visibility:hidden */
/* .hidden {
  visibility: hidden;
} */

/* 若需要隐藏元素完全脱离文档流不占位置，替换为display:none即可 */
.hidden {
  display: none;
}

3. 优化JS切换逻辑 #

使用原生classList的增删类方法，不对元素原有类做整体覆盖，完全兼容后续添加的任意样式类：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有下拉选项绑定点击事件
  document.querySelectorAll('.master').forEach(item => {
    item.addEventListener('click', () => {
      const targetId = item.value;
      toggleActiveContent(targetId);
    })
  })
})

function toggleActiveContent(activeId) {
  // 批量重置：给所有待切换的内容Div重新加上hidden类
  document.querySelectorAll('.SAform').forEach(section => {
    section.classList.add('hidden');
  })
  // 单独显示：移除当前选中项对应Div的hidden类
  document.getElementById(activeId).classList.remove('hidden');
}

实现逻辑说明 #

• 整套逻辑没有对元素的类名做整体替换，仅针对性增删hidden这一个控制显隐的类，不会干扰元素上已有的Bootstrap工具类、自定义业务类，后续加任意样式都不会被JS覆盖。
• 每次点击下拉选项都会先把所有内容区切回隐藏状态，再单独显示当前选中项对应的内容，完全符合“仅展示单个关联Div、其余保持隐藏”的需求。
• 控制台报错的根源是之前批量选择器匹配不到元素后，空集合的操作逻辑和后续节点操作的上下文不匹配，修正选择器之后报错会自动消失。
• 补充：Bootstrap下拉菜单本身会在点击选项后自动收起，不需要额外编写收起逻辑，和这套显隐控制逻辑完全兼容。

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