Bootstrap下拉列表:'navbar-toggle'的事件？

Question

我们是否有活动的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="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>

否则,我们如何检测navbar-toggle小屏幕上是否存在？

Answer 1

这些navbar-toggle方法会发出Collapse事件:

活动

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…
})

文档:http://getbootstrap.com/javascript/#collapse