当我们在较小的屏幕上时,我们是否会显示导航栏切换的事件?
例如,
$('#myDropdown').on('shown.bs.navbar-toggle',function () { // do something… }); $('#myDropdown').on('hide.bs.navbar-toggle',function () { // do something… });
HTML,
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--<a class="navbar-brand" href="#">Home</a>--> </div>
否则,我们如何检测在较小屏幕上是否存在导航栏切换?
解决方法
导航栏切换方法发出“折叠”事件:
活动
Bootstrap的崩溃类暴露了一些挂钩到崩溃功能的事件。
Event Type Description show.bs.collapse This event fires immediately when the show instance method is called. shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). hide.bs.collapse This event is fired immediately when the hide method has been called. hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
例
$('#myCollapsible').on('hidden.bs.collapse',function () { // do something… })