如何修改代码实现点击navbar外区域关闭、点击内部保持导航栏展开功能

实现思路 #

• 核心是通过事件冒泡机制区分点击区域：点击导航内部元素时阻止事件冒泡到顶层文档，点击外部区域时触发关闭逻辑
• 保留原有导航按钮点击展开/收起的逻辑，新增两个事件监听：导航内部元素的冒泡阻止、全局文档点击的关闭触发

修改后完整代码 #

$(document).ready(function() {
  // 导航按钮点击交互逻辑
  $('.nav-btn').on('click', function(e) {
    // 阻止点击事件冒泡到document，避免触发外部关闭
    e.stopPropagation();
    // 收起其他已展开的子菜单、移除其他按钮激活状态
    $('.nav-btn').not(this).removeClass('active');
    $('.sub-menu').not($(this).parent().find('.sub-menu')).slideUp();
    // 切换当前子菜单状态、当前按钮激活状态
    $(this).parent().find('.sub-menu').slideToggle();
    $(this).toggleClass('active');
  });

  // 点击子菜单内部元素时阻止冒泡，避免点菜单内容直接关闭
  $('.sub-menu').on('click', function(e) {
    e.stopPropagation();
  });

  // 监听全局点击，触发导航关闭
  $(document).on('click', function() {
    $('.sub-menu').slideUp();
    $('.nav-btn').removeClass('active');
  });
});

代码说明 #

• 如果你不需要「点击其他导航按钮时自动收起已展开的子菜单」的效果，可以删除$('.nav-btn').not(this).removeClass('active');和$('.sub-menu').not($(this).parent().find('.sub-menu')).slideUp();两行代码
• 逻辑兼容原有交互，不会影响导航内部按钮、链接、表单等元素的正常操作

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