活动

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方法会发出折叠事件：

活动

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

Answer 2

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

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

结合@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上尝试此操作。

Answer 3

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

如果您需要其可见性来触发其他内容，您可以查看实现jQuery Mutate插件。这有效地监视元素以更改属性，然后触发事件。 http://www.jqui.net/jquery-projects/jquery-mutate-official/

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

3 个答案:

活动

实施例