Drupal8+Bootstrap3：折叠菜单展开时为body加类及代码验证

嘿，你的实现思路和代码写法都没问题，功能正常就说明它完美达成了你的需求，下面我帮你拆解下为什么这段代码是靠谱的：

• 事件选择精准：你使用了Bootstrap Collapse组件官方提供的show.bs.collapse（展开开始时触发）和hide.bs.collapse（隐藏开始时触发）事件，这是最规范的监听折叠状态变化的方式，完全符合Bootstrap的设计逻辑。
• 作用范围明确：你只给特定ID的折叠菜单#navbar-collapse-first绑定了事件，不会影响页面上其他的折叠组件，避免了不必要的全局副作用。
• 操作逻辑简洁：展开时给body添加overlay-is-navbar-collapse类，隐藏时移除，逻辑直接清晰，没有冗余代码，执行效率也很高。
• 代码位置合理：你把自定义代码放在了Bootstrap collapse.js的末尾，确保代码在Collapse组件的逻辑完全加载后执行，不会出现事件绑定失败的情况。

小优化建议（非必需） #

如果后续你需要维护类似功能，或者有多个折叠菜单需要处理，可以把选择器和类名抽成变量，让代码更易维护：

// 抽离变量，方便后续修改
const targetCollapse = '#navbar-collapse-first';
const bodyOverlayClass = 'overlay-is-navbar-collapse';

$(targetCollapse).on('show.bs.collapse', function () {
  $('body').addClass(bodyOverlayClass);
});

$(targetCollapse).on('hide.bs.collapse', function () {
  $('body').removeClass(bodyOverlayClass);
});

总的来说，你的原始代码已经完全满足需求，无需修改，放心使用就好！

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