Twitter Bootstrap 2 w zdarzeniu zwijania

Question

czy istnieje sposób na złapanie po wyświetleniu menu zwijania (lub po kliknięciu przycisku zwijania przez użytkownika)?

Używam standardowego ramek programu Twitter i klas.

Answer 1

TWITTER Bootstrap 2

Wygląda na to, że wtyczka jest dodanie klasę "w" do aktywnej grupy upadku. Więc może mógłbyś zrobić coś takiego.

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

EDIT:

Ok, nie mam zresztą badania w tej chwili, więc to niby tylko domysły. Jestem pewien, że można to łatwo ustalić, klikając link zwijania.

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

Jeśli jednak chcesz dokładnie wiedzieć, który z nich został kliknięty, prawdopodobnie musisz je zindeksować.

Answer 2

Użyj „pokazany” obsługi zdarzenia:

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

Patrz: http://twitter.github.com/bootstrap/javascript.html#collapse aby zobaczyć inne zdarzenia obsługiwane

Answer 3

Jeśli chcesz użyć łagodnego animację ze zmianą ikony trzeba zrób to na pokaż/ukryj.

W tym przykładzie używam startowej 2.3.2, jQuery 1.8.3 i 3.2.1 Czcionka Niesamowite

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

W bootstrap 3.x cztery zdarzenia, których szukasz, to:

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

Wystrzeliwują element DOM celu danych, np. dla następujących znaczników:

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

że słuchasz (w jQuery) poprzez:

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