web-dev-qa-db-ja.com

Bootstrap dropdown： 'navbar-toggle'のイベント？

小さい画面で表示されるnavbar-toggleにはeventsがありますか？

例えば、

$('#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が存在するかどうかをどのように検出できますか？

jqueryhtmlcsstwitter-bootstrapdrop-down-menu
30
laukok

navbar-toggleメソッドはCollapseイベントを発行します。

イベント

ブートストラップの折りたたみクラスは、折りたたみ機能にフックするためのいくつかのイベントを公開します。

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

55
Eric Uldall

Show/showまたはhide/hidden.bs.collapseイベントをトリガーすることができませんでした。イベントを#navbar要素に結び付けました。

私のために働いたのは、resizeイベントを使用してから、ナビゲーションバーが表示されているかどうかを確認することでした：

@Patel、 madhatter16 および@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 でこれを試すこともできます。

3
kashiraja