如何使用jQuery实现元素点击显隐及点击其他区域隐藏子项

嘿，我来帮你搞定这个需求！你要的是点击主菜单切换子菜单的显示和隐藏，同时点击页面其他任意区域（包括其他菜单）时自动收起子菜单，下面是完整的实现方案，我会把容易踩坑的细节都讲清楚。

核心思路 #

• 给主菜单绑定点击事件，用来切换子菜单的显示状态（显示/隐藏）
• 给整个文档绑定点击事件，触发时隐藏子菜单
• 重点注意：必须阻止主菜单的点击事件向上冒泡，不然刚点开子菜单就会被文档的点击事件立刻收起，完全看不到效果！

完整代码示例 #

HTML结构 #

先搭好菜单的基础结构，主菜单和子菜单层级要清晰：

<ul id="main-menu">
  <li>
    <a href="#" id="mainTopics">主菜单</a>
    <ul id="subTopics">
      <li><a href="#">子菜单选项1</a></li>
      <li><a href="#">子菜单选项2</a></li>
      <li><a href="#">子菜单选项3</a></li>
    </ul>
  </li>
</ul>

CSS样式 #

给菜单加基础样式，默认让子菜单隐藏：

body { margin: 0; }
li, a {
  text-decoration: none;
  list-style-type: none;
  color: #333;
}
/* 主菜单容器样式 */
#main-menu {
  position: relative;
  padding: 12px;
  background-color: #f8f9fa;
  width: fit-content;
}
/* 子菜单默认隐藏，设置绝对定位让它悬浮在主菜单下方 */
#subTopics {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  width: 160px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 子菜单项的 hover 效果，提升交互体验 */
#subTopics li {
  padding: 8px 14px;
}
#subTopics li:hover {
  background-color: #e9ecef;
}

jQuery脚本 #

这里是核心逻辑，注意处理事件冒泡：

$(document).ready(function () {
  // 点击主菜单，切换子菜单的显示/隐藏状态
  $("#mainTopics").click(function (e) {
    e.preventDefault(); // 阻止<a>标签的默认跳转行为（比如跳转到页面顶部）
    e.stopPropagation(); // 阻止事件冒泡到document，避免刚点开就被隐藏
    $("#subTopics").toggle();
  });

  // 点击页面任意非菜单区域，隐藏子菜单
  $(document).click(function () {
    $("#subTopics").hide();
  });

  // 额外优化：点击子菜单内部时，不要收起子菜单
  $("#subTopics").click(function (e) {
    e.stopPropagation();
  });
});

关键细节解释 #

1. e.stopPropagation()的作用：
   浏览器的事件是会向上冒泡的，如果不阻止主菜单的点击事件冒泡，点击#mainTopics时，事件会一路传到document，触发我们绑定的隐藏事件，导致子菜单刚显示就被隐藏，完全达不到预期效果。

2. e.preventDefault()的作用：
   因为主菜单用的是<a>标签，默认点击会跳转到#（页面顶部），这个方法可以阻止这个默认行为，让菜单的交互更流畅。

3. 子菜单内部点击的处理：
   给子菜单也绑定阻止冒泡的事件，这样点击子菜单里的选项时，不会触发document的隐藏事件，子菜单会保持显示，用户体验更好。

注意事项 #

• 请确保你的页面已经正确引入了jQuery库，不管是本地引入还是使用CDN，只要在上述脚本之前加载即可。
• 如果有多个类似的主菜单，可以把逻辑封装成通用函数，比如给所有主菜单加统一的class，通过数据属性关联对应的子菜单，避免重复写代码。

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