web-dev-qa-db-fra.com

Bootstrap dropdown: événements pour le 'navbar-toggle'?

Avons-nous événements pour le navbar-toggle qui apparaît lorsque nous sommes sur le petit écran?

Par exemple,

$('#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>

Sinon, comment pouvons-nous détecter si cela navbar-toggle existe sur le petit écran?

jqueryhtmlcsstwitter-bootstrapdrop-down-menu
30
laukok

Le navbar-toggle les méthodes émettent les événements Collapse:

Événements

La classe de repli de Bootstrap expose quelques événements pour se connecter à la fonctionnalité de repli.

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).

Exemple

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Documents: http://getbootstrap.com/javascript/#collapse

55
Eric Uldall

Je n'ai pas pu déclencher les événements show/shown ou hide/hidden.bs.collapse. J'ai lié l'événement à l'élément #navbar.

Ce qui a fonctionné pour moi, c'est simplement d'utiliser l'événement resize , puis de vérifier si la barre de navigation est visible:

En combinant ce que @Patel, madhatter16 et @haxxxton ont suggéré que j'ai pu le faire fonctionner:

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');
});

Il s'agit d'une solution assez simple qui n'a pas besoin de plugins jQuery spéciaux pour fonctionner. J'aimerais qu'il soit possible de faire fonctionner cela en utilisant les événements * .bs.collapse définis!

Vous pouvez également essayer ceci sur jsFiddle .

3
kashiraja