Question

有很多方法可以做到这一点，但是我想要最好，最干净的方法。

我想在body切换.navbar-toggle元素上的.show类时切换自定义.navbar-collapse类。

我只是认为在已经触发javascript的对象上使用另一个on click事件似乎有点脏。反正有功能上绑定到现有功能吗？

<body class="">
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">#</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        ...
      </ul>
    </div>
  </nav>
</body>

https://jsfiddle.net/joshmoto/s74x32uf/

任何想法都会非常感谢

Answer 1

最好的方法是使用Bootstrap's collapse events

打开的动画播放完毕

$('.navbar').on('shown.bs.collapse', function () {
  alert('animation complete');
  $('body').addClass('your-class');
})

关闭的动画完成后

$('.navbar').on('hidden.bs.collapse', function () {
  alert('animation complete');
  $('body').addClass('your-class');
})

您还可以使用show.bs.collapse或hide.bs.collapse

在动画开始显示/隐藏时添加事件。

Updated fiddle

添加或删除导航栏折叠显示类时切换主体类

1 个答案: