jQuery点击事件仅首次触发？Bootstrap 4下拉菜单绑定失效问题

• 你当前的委托事件绑定在 document 的冒泡阶段，Bootstrap 4 的 Dropdown 组件在第一次展开下拉时，会自动在 document 节点上注册一个捕获阶段的全局点击监听，专门用来处理点击页面空白处关闭下拉的逻辑。这个捕获阶段的监听器会先于冒泡阶段的所有监听器执行，并且会在执行时拦截事件的后续传递，直接阻断你绑定的委托事件触发路径。这就解释了为什么第一次点击能正常打印日志——因为这时候Bootstrap的全局拦截监听器还没被注册，第一次点击触发下拉展开后，这个监听器才被加上，后续的所有点击事件都被它提前拦截，根本传不到冒泡阶段的你的回调里。
• 原有业务逻辑本身存在判断错误：Bootstrap 4 默认是把 show 类加在内层的 .dropdown-menu 元素上，不会给外层的导航li元素加这个类，你原来的代码遍历所有导航li判断是否带show类，这个判断从一开始就永远返回false，就算事件能正常触发，给header加类的逻辑也执行不到。

直接用Bootstrap Dropdown组件自带的原生事件实现需求，完全绕开全局点击监听的冲突：

• 当下拉菜单触发展开流程时，给header加指定类名
• 当下拉菜单触发收起流程时，移除header上的对应类名

实现代码示例：

// 下拉展开时触发
$('#menu-main-menu').on('show.bs.dropdown', function() {
  $('header').addClass('你要加的指定类名');
});
// 下拉收起时触发
$('#menu-main-menu').on('hide.bs.dropdown', function() {
  $('header').removeClass('你要加的指定类名');
});

这个方案的优势：

• 事件触发时机完全由组件内部保证，不会被全局点击拦截逻辑影响
• 不需要手动遍历DOM判断状态，代码逻辑更简洁
• 能覆盖所有下拉关闭的场景：点击toggle按钮切换关闭、点击页面空白处关闭、按ESC键关闭，不会出现漏触发的情况

注意：不要继续使用全局委托点击监听的实现方式，这种方案本身就和Bootstrap的组件逻辑存在冲突，就算临时调整绑定位置能跑通，也容易在后续版本升级时出现新的问题。

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