如何使用Bootstrap下拉菜单实现容器的显示/隐藏？

看起来你已经搞定了菜单切换显示对应区块的核心功能，不过可以把代码优化得更通用、易维护，不用每次加新菜单项都改JS逻辑。我整理了一个更健壮的版本，同时修正了原代码里的小矛盾：

第一步：完善HTML结构（示例） #

先确保你的HTML结构和data-container属性对应上，这样JS可以动态识别目标区块：

<ul id="main-menu">
  <li><a href="#" data-container="hearing-container">听力模块</a></li>
  <li><a href="#" data-container="test-container">测试模块</a></li>
  <li><a href="#" data-container="profile-container">个人中心</a></li>
</ul>

<div id="main-container">
  <div id="hearing-container">这里是听力模块的内容区域</div>
  <div id="test-container">这里是测试模块的内容区域</div>
  <div id="profile-container">这里是个人中心的内容区域</div>
</div>

第二步：优化JavaScript逻辑 #

这个版本会统一处理初始化和点击事件，避免硬编码，扩展性更强：

$(document).ready(function() {
  // 1. 初始化：设置默认激活的区块（比如你想要默认显示test-container）
  const defaultActiveContainer = 'test-container';
  
  // 通过触发点击事件完成初始化，保证菜单项状态和显示内容一致
  $(`#main-menu a[data-container=${defaultActiveContainer}]`).trigger('click');

  // 2. 绑定菜单项点击事件
  $('#main-menu li a').on('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    
    // 获取当前点击项对应的目标容器ID
    const targetContainerId = $(this).data('container');

    // 切换菜单项的激活状态
    $('#main-menu li').removeClass('active');
    $(this).parent().addClass('active');

    // 切换内容区块的显示/隐藏
    $('#main-container > div').hide(); // 先隐藏所有区块
    $(`#${targetContainerId}`).show(); // 再显示目标区块
  });
});

第三步：添加基础样式（可选） #

给激活的菜单项和内容区块加些样式，让交互更直观：

#main-menu li {
  display: inline-block;
  margin-right: 15px;
  list-style: none;
}

#main-menu .active a {
  color: #007bff;
  font-weight: bold;
  text-decoration: none;
}

#main-container > div {
  display: none; /* 默认隐藏所有内容区块 */
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

优化点说明： #

• 去掉了原代码中硬编码的重复选择器，通过data-container属性动态关联菜单项和内容区块，新增菜单项时只要对应好ID就行，不用改JS
• 统一通过触发点击事件完成初始化，避免了原代码中“激活菜单项和显示区块不一致”的逻辑矛盾
• 用批量隐藏+单独显示的方式替代not()选择器，代码更简洁易懂

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