Bootstrap下拉菜单：如何为“navbar-toggle”添加事件？

Question

Bootstrap下拉菜单：如何为“navbar-toggle”添加事件？

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

39

当我们处于较小的屏幕时，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？

- Run

3个回答

4

我无法触发show / shown或hide / hidden.bs.collapse事件。我将该事件绑定到#navbar元素。

对我有用的是只使用resize事件，然后检查导航栏是否可见：

结合@Patel、madhatter160和@haxxxton建议，我成功地让它工作了：

var navbar_visible = $("#navbar").is(":visible");

$(window).resize(function(){
  navbar_visible = $("#navbar").is(":visible");

  if (navbar_visible)
    $('#brand_name').text('Navbar is visible');
  else
    $('#brand_name').text('Navbar is not visible');
});

这是一个非常简单的解决方案，不需要任何特殊的jQuery插件即可运行。不过我希望可以使用定义好的*.bs.collapse事件使其工作！您也可以在jsFiddle上尝试此代码。

- kashiraja

只是好奇，#navbar 元素是否在初始页面加载后通过 ajax 注入的？这可能解释了为什么 .on 事件不起作用。如果可能的话，最好不要钩入 .resize 方法，因为它会在页面上造成很多开销，特别是当有人调整浏览器窗口大小时。 - Eric Uldall

我fork了你的jsfiddle并使用了正确的bootstrap事件，现在它可以正常工作。https://jsfiddle.net/j4j7tgz2/ - Eric Uldall

@EricUldall（1）：id =“navbar”位于第13行。我同意您会收到很多事件，但可以使用超时来限制每100毫秒处理一次。（2）：这很有趣...我无法在我的浏览器中运行您的小样！（Chrome 57 on Win7）。但是我发布的那个仍然在我的端口工作。一些兼容性问题... - kashiraja

有趣。我在MacOS（Sierra）上的Chrome 58.0.3029.110中运行了fiddle。不幸的是，我没有很好的方法来测试它在您当前的架构上并提供更详细的信息。这真的很不幸，因为使用库提供的事件是最佳方案。也许如果有人感兴趣，他们可以在bootstrap.js github问题中发布一个票据，并查看是否知道某些兼容性问题。 - Eric Uldall

为了使show.bs.collapse正常工作，您应该将事件处理程序绑定到$("div.navbar-collapse.collapse")。 - Ehsan Abidi

-1

使用jQuery，您可以使用.is(':visible')测试某些内容是否可见。http://api.jquery.com/visible-selector/

如果您需要其可见性触发其他操作，则可以考虑实现jQuery Mutate插件。这有效地监视元素的属性变化，然后触发事件。http://www.jqui.net/jquery-projects/jquery-mutate-official/

- haxxxton

这种方法的问题在于它不是事件驱动的。你要么不停地检查元素的可见性，要么钩入页面上的其他繁琐事件（例如：调整大小，请参见@kashiraja的回答中的评论）。 - Eric Uldall

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eric Uldall · Accepted Answer

navbar-toggle方法会触发折叠事件：

事件

Bootstrap的折叠类（collapse class）为与折叠功能相关的操作提供了几个事件。

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