2014-02-20 36 views
26

Haben wir Ereignisse für die navbar-toggle, die erscheint, wenn wir auf dem kleineren Bildschirm sind?Bootstrap Dropdown: Ereignisse für den 'Navbar-Toggle'?

Zum Beispiel

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

Wie sonst können wir feststellen, ob die navbar-toggle auf dem kleineren Bildschirm vorhanden ist?

Antwort

47

Die navbar-toggle Methoden emittieren die Ereignisse Collapse:

Events

Bootstrap Zusammenbruch Klasse stellt einige Ereignisse für uns in den Kollaps Funktionalität Einhaken.

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

Beispiel

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

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

+0

Vielen Dank für diese Antwort! – laukok

+0

Sie sind herzlich willkommen mein Freund. –

+0

Ich konnte dieses Ereignis nicht auslösen (nicht mindestens in Chrome), siehe [this] (http://stackoverflow.com/a/43288718/759673) Workaround, mit dem das Problem behoben wurde. – kashiraja

-1

Mit jQuery können Sie testen, ob etwas sichtbar ist mit .is(':visible'). http://api.jquery.com/visible-selector/

Wenn Sie Ihre Sichtbarkeit benötigen, um etwas anderes auszulösen, können Sie das jQuery Mutate-Plugin implementieren. Dies überwacht effektiv ein Element auf eine Änderung in einer Eigenschaft und löst dann ein Ereignis aus. http://www.jqui.net/jquery-projects/jquery-mutate-official/

+0

Das Problem mit dieser Methode ist, dass es nicht ereignisgesteuert ist. Sie müssen entweder ständig die Sichtbarkeit des Elements prüfen oder in ein anderes gesprächiges Ereignis auf der Seite einhaken (zB: Größe ändern, siehe Kommentare auf @kashirajas Antwort) –

1

ich nicht die Show/gezeigt bekommen konnte oder ausblenden/hidden.bs.collapse Ereignisse ausgelöst werden. Ich habe das Ereignis an das Element #navbar gebunden.

Was funktioniert hat nur für mich wurde mit der Ereignis die Größe und dann prüfen, ob die Navigationsleiste sichtbar ist:

Kombination, was @Patel, madhatter160 und @haxxxton schlug ich konnte es an die Arbeit:

Dies ist eine ziemlich einfache Lösung, die keine speziellen jQuery-Plugins benötigt. Ich wünschte, es wäre möglich, dies mit den definierten * .bs.collapse-Ereignissen zu bewerkstelligen!

Sie können dies auch unter jsFiddle versuchen.

+0

Nur neugierig, wurde das Element '# navbar' über Ajax nach dem ersten Laden der Seite injiziert? Das könnte erklären, warum das '.on'-Ereignis nicht so funktionierte wie es ist. Es ist nicht optimal, wenn möglich in die '.resize'-Methode einzuhaken, da dies zu einem hohen Overhead auf der Seite führt, insbesondere wenn jemand die Größe seines Browserfensters ändert. –

+0

Ich habe deine jfiddle gegabelt, um die richtigen Bootstrap-Ereignisse zu verwenden, und es funktioniert gut. https://jsfiddle.net/j4j7tgz2/ –

+0

@EricUldall (1): Die ID = "navbar" ist in Zeile 13. Ich stimme zu, dass Sie eine Menge von Ereignissen erhalten, aber möglich, ein Timeout zu verwenden, um nur Prozess zu begrenzen nach jeweils 100 ms. (2): Das ist interessant ... Ich kann deine Geige nicht dazu bringen, in meinem Browser zu arbeiten! (Chrome 57 auf Win7). Aber der, den ich gepostet habe, funktioniert immer noch an meinem Ende. Einige Kompatibilitätsprobleme ... – kashiraja