如何判断Bootstrap 4折叠式导航栏的展开/收起状态？

嘿，这个问题其实很好解决！Bootstrap 4的折叠导航栏基于它自带的Collapse组件，这个组件提供了专门的事件来监听展开和收起的状态变化，我给你一步步说明怎么实现：

首先，先搞清楚核心：Bootstrap 4的折叠组件有四个关键事件，对应折叠状态的不同阶段：

• show.bs.collapse：导航栏开始展开时触发（动画刚开始）
• shown.bs.collapse：导航栏完全展开后触发（动画结束）
• hide.bs.collapse：导航栏开始收起时触发（动画刚开始）
• hidden.bs.collapse：导航栏完全收起后触发（动画结束）

接下来，你只需要给导航栏的折叠容器绑定这些事件就行——通常这个容器的类是collapse navbar-collapse，你可以通过类名或者唯一ID来选中它。

方法一：用jQuery实现（Bootstrap 4默认依赖jQuery） #

如果你的项目已经引入了jQuery，直接复制下面的代码就能用：

// 选中折叠导航栏容器
$('.navbar-collapse').on('show.bs.collapse', function () {
  console.log('导航栏开始展开啦！');
  // 这里可以写你的自定义逻辑，比如修改页面样式、上报统计数据等
})

$('.navbar-collapse').on('shown.bs.collapse', function () {
  console.log('导航栏已经完全展开咯！');
})

$('.navbar-collapse').on('hide.bs.collapse', function () {
  console.log('导航栏开始收起啦！');
})

$('.navbar-collapse').on('hidden.bs.collapse', function () {
  console.log('导航栏已经完全收起咯！');
})

方法二：用原生JavaScript实现 #

如果不想依赖jQuery，用原生JS也能搞定：

// 选中折叠导航栏容器
const collapseNav = document.querySelector('.navbar-collapse');

// 监听展开开始事件
collapseNav.addEventListener('show.bs.collapse', function () {
  console.log('导航栏开始展开');
});

// 监听展开完成事件
collapseNav.addEventListener('shown.bs.collapse', function () {
  console.log('导航栏展开完成');
});

// 监听收起开始事件
collapseNav.addEventListener('hide.bs.collapse', function () {
  console.log('导航栏开始收起');
});

// 监听收起完成事件
collapseNav.addEventListener('hidden.bs.collapse', function () {
  console.log('导航栏收起完成');
});

小技巧 #

• 如果页面上有多个折叠组件，建议给导航栏的折叠容器加一个唯一ID（比如id="mainNavCollapse"），然后用$('#mainNavCollapse')（jQuery）或者document.getElementById('mainNavCollapse')（原生JS）来选中，避免影响其他折叠元素。
• 要是你需要随时判断导航栏当前的状态，可以检查容器是否带有show类：
  • jQuery：$('.navbar-collapse').hasClass('show')（返回true表示展开，false表示收起）
  • 原生JS：collapseNav.classList.contains('show')

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