Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap dropdown: events for the 'navbar-toggle'?

Do we have events for the navbar-toggle that appears when we are on the smaller screen?

For instance,

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

Otherwise, how can we detect if that navbar-toggle exists on the smaller screen?

like image 519
Run Avatar asked Feb 20 '14 06:02

Run


People also ask

How do I toggle a dropdown in Bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How do I toggle navbar in Bootstrap?

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".

How do I add a drop down menu to the navigation bar in Bootstrap?

Example Explained. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

What is dropdown toggle?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


1 Answers

The navbar-toggle methods emit the Collapse events:

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

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

Example

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

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

like image 166
Eric Uldall Avatar answered Oct 26 '22 00:10

Eric Uldall