添加或删除导航栏折叠显示类时切换主体类
[英]toggle body class when navbar collapse show class is added/removed
问题描述
有很多方法可以做到这一点，但是我想要最好，最干净的方法。
我想切换自定义body上课的时候.navbar-toggle切换的.show的阶级.navbar-collapse元素。
我只是认为on click已经触发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/
任何想法都将非常感谢
1 个解决方案
解决方案1
2 已采纳 2018-09-11 18:48:13
最好的方法是使用Bootstrap的折叠事件
打开动画结束后
$('.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在动画开始显示/隐藏时添加事件。
添加和删除类时如何触发函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.