引导下拉菜单：“navbar-toggle”的事件？ [英] Bootstrap dropdown: events for the 'navbar-toggle'?

问题描述

我们在较小萤幕上显示的 navbar-toggle 是否有事件？

例如，

  $（'＃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 =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
<！ - < a class =navbar-brandhref =＃>首页< / a>  - > 
< / div> 
  

否则，我们如何检测 navbar-toggle c>

>方法发出Collapse事件：

事件

Bootstrap的collapse类暴露了一些事件，

 事件类型说明
 show.bs.collapse当调用show instance方法时，此事件立即触发。 
 shown.bs.collapse当崩溃元素对用户可见时（将等待CSS转换完成）​​触发此事件。 
 hide.bs.collapse当调用hide方法时，会立即触发此事件。 
 hidden.bs.collapse当用户隐藏了折叠元素时会触发此事件（将等待CSS转换完成）​​。 
  

示例

  $（'＃myCollapsible'）。on（'hidden.bs.collapse'，function（）{
 // do something ... 
}）
  

文件： http://getbootstrap.com/javascript /＃collapse

Do we have events for the navbar-toggle that appears when we are on the smaller screen?

For instance,

$('#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>

Otherwise, how can we detect if that navbar-toggle exists on the smaller screen?

解决方案

The navbar-toggle methods emit the Collapse events:

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

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).

Example

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Docs: http://getbootstrap.com/javascript/#collapse

这篇关于引导下拉菜单：“navbar-toggle”的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！