Bootstrap 下拉菜单:“导航栏切换"的事件?

问题描述

当我们在较小的屏幕上时，我们是否有 navbar-toggle 的事件?

例如

$('#myDropdown').on('shown.bs.navbar-toggle', function () {//做一点事…});$('#myDropdown').on('hide.bs.navbar-toggle', function () {//做一点事…});

html,

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><!--<a class="navbar-brand" href="#">首页</a>-->

否则，我们如何检测navbar-toggle 是否存在于较小的屏幕上?

解决方案

navbar-toggle 方法发出 Collapse 事件:

活动

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件.

事件类型说明show.bs.collapse 在调用 show 实例方法时立即触发此事件.Shows.bs.collapse 当折叠元素对用户可见时会触发此事件(将等待 CSS 转换完成)​​.hide.bs.collapse 在调用 hide 方法时立即触发此事件.hidden.bs.collapse 当折叠元素对用户隐藏时会触发此事件(将等待 CSS 转换完成)​​.

示例

$('#myCollapsible').on('hidden.bs.collapse', function () {//做一点事…})

文档: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

这篇关于Bootstrap 下拉菜单:“导航栏切换"的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！