Bootstrap4 navbar-toggle调用函数及点击外部关闭导航栏问题

首先先回答你关于Bootstrap 4中navbar-toggle按钮的疑问：这个按钮是通过Bootstrap的Collapse插件来工作的，点击它时会调用目标折叠元素（也就是你的#navbar-collapse）的collapse('toggle')方法——插件会自动处理菜单的展开/隐藏，同时同步更新按钮的aria-expanded状态属性，这是Bootstrap组件内部维护的标准逻辑。

接下来看你遇到的问题：你之前尝试的几种方案都踩了同一个坑——没有通过Bootstrap官方的Collapse API来操作菜单，而是直接修改DOM类或样式，破坏了组件内部的状态管理，导致后续按钮响应异常。下面是正确的实现方式：

正确的代码实现 #

替换你原来的JavaScript代码为以下内容：

// 监听全局文档点击事件，只绑定一次
$(document).on('click', function(e) {
  const $collapseMenu = $('#navbar-collapse');
  // 两个判断条件：1. 当前菜单处于展开状态；2. 点击的元素不在导航栏内部（包括按钮和菜单本身）
  if ($collapseMenu.hasClass('show') && !$(e.target).closest('.navbar').length) {
    // 调用Bootstrap Collapse的hide方法，这是官方推荐的方式，会正确维护组件状态
    $collapseMenu.collapse('hide');
  }
});

为什么这个方案有效？ #

• 避免重复绑定事件：之前你在show.bs.collapse事件里绑定html点击事件，每次菜单展开都会新增一个事件监听，多次点击后会触发多次操作，导致逻辑混乱。现在我们只绑定一次全局点击事件，更高效也更可靠。
• 精准判断点击区域：用closest('.navbar')检查点击元素是否属于导航栏内部，这样点击按钮、菜单选项时都不会触发隐藏，只有点击页面其他区域才会生效。
• 遵循Bootstrap API：调用collapse('hide')会让Collapse插件完整处理隐藏逻辑——包括移除show类、更新按钮的aria-expanded属性、触发对应的事件，确保组件状态完全同步，后续点击按钮依然能正常切换菜单。

分析你之前方案的问题 #

1. 直接移除'show'类：Bootstrap的Collapse组件内部会维护自己的状态（比如按钮的aria-expanded、组件的事件监听），手动移除类不会同步这些状态，导致按钮无法正确识别当前菜单状态，自然无响应。
2. 使用jQuery的hide()：hide()会给元素添加display:none的行内样式，而Bootstrap的Collapse是通过show类来控制显示的，行内样式优先级更高，后续组件无法清除这个样式，导致菜单无法正常展开。
3. 调用collapse('toggle')：这个方法会切换菜单状态，所以点击外部时如果菜单是展开的会隐藏，但如果下次点击外部时菜单是收起的又会展开，就出现了"点击任意区域都切换"的问题，我们需要的只是"展开时点击外部隐藏"，所以应该用hide()。
4. 修改按钮属性：手动修改按钮的aria-expanded等属性，没有同步更新Collapse组件的内部状态，组件逻辑会混乱，导致点击按钮无法正常触发切换。

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