Twitter Bootstrap 2 en el evento de colapso

Question

¿Hay alguna forma de detectar cuando aparece el menú de contracción (o cuando el usuario hace clic en el botón de contraer)?

Estoy usando el framework y las clases de bootstrap twitter.

Answer 1

TWITTER BOOTSTRAP 2

Parece que el plugin es la adición de la clase "en" al grupo colapso activo. Entonces quizás puedas hacer algo como esto.

if($('#collapseOne').hasClass('in')){ 
..do something 
} 

EDIT:

bien, no tengo de todos modos de la prueba en este momento, por lo que estos son una especie de sólo conjeturas. Estoy seguro de que podría determinar fácilmente cuándo se hizo clic en un enlace de colapsar haciendo esto.

$('.accordion-toggle').click(function(){ 
    console.log('clicked'); 
}); 

Sin embargo, si lo que quería saber exactamente cuál fue hecho clic que probablemente habría que ponerlos en un índice.

Answer 2

Use la "muestra" controlador de eventos:

$("#accordion").on("shown",function(event){ 
     collapse_element = event.target; 
    }); 

referirse a: http://twitter.github.com/bootstrap/javascript.html#collapse a ver los otros eventos apoyados

Answer 3

Si desea utilizar la aceleración de animación con el cambio del icono que necesita haz esto en show/hide.

En este ejemplo, estoy usando 2.3.2 arranque, jQuery 1.8.3, 3.2.1 y Font impresionante

HTML:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a data-item-id="{id}" href="#something" data-parent="#accordion" 
     data-toggle="collapse" class="accordion-toggle"> 
     <i class="icon icon-expand-alt"></i> {title}</a> 
    </div> 
    <div data-item-id="{id}" class="accordion-body collapse" id="something"> 
     <div class="accordion-inner"> 
     {Content} 
     </div> 
    </div> 
    </div> 
... {additional panels} 
</div> 

JS:

$('#accordion').on('show hide', function (e) { 
    var oTarget = $(e.target); 
    var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]')); 
    oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200); 
}); 

Answer 4

En bootstrap 3.x, los cuatro eventos que está buscando son:

show.bs.collapse 
shown.bs.collapse 
hide.bs.collapse 
hidden.bs.collapse 

Disparan en el elemento DOM de destino de datos, p. para el siguiente margen de ganancia:

<div role="navigation" class="navbar navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">Title</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li id="item1"><a href="#item1">Menu Item 1</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Usted quisiera escucharlo (en jQuery) a través de:

$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); }); 
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });