Jak ustalić, czy zwinięcie bootstrapu jest otwierane czy zamykane?

Question

Jeśli mam zwijanie bootstrap, w jaki sposób mogę stwierdzić na podstawie zdarzenia kliknięcia zwinięcie otwiera się lub zamyka?

Oto moje wydarzenie na kliknięcie, a może jest lepszy sposób na wykorzystanie zdarzenia kliknięcia?

$(document).on("click", "a.register-student-link", function() { 
    // do some stuff to check if opening or closing 
} 

<div> 
 
    <a id=@space.EventId class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample"> 
 
                Register Student 
 
               </a> 
 
</div>

Answer 1

Można oglądać wydarzenie hidden.bs.collapse

zobaczyć skrzypce: http://jsfiddle.net/kyeuvx1d/

Answer 2

Spróbuj:

$('#collapseDiv').on('shown.bs.collapse', function() { 
 
    console.log("Opened") 
 
}); 
 

 
$('#collapseDiv').on('hidden.bs.collapse', function() { 
 
    console.log("Closed") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <a id=@space.EventId class="register-student-link" data-toggle="collapse" href="#collapseDiv" aria-expanded="false" aria-controls="collapseExample">Register Student</a> 
 
</div> 
 

 
<div class="collapse" id="collapseDiv">This is the collapsible content!</div>

(na podstawie https://stackoverflow.com/a/18147817/2033574 (Kevin wymienionych) i http://www.bootply.com/73101)

Answer 3

bootstrap używa atrybutu aria, rozwinięty, aby pokazać prawda czy fałsz jeśli region zapada się, czy też nie.

var isExpanded = $(collapsableRegion).attr("aria-expanded"); 

Answer 4

Potrzebowałem sposobu, aby ustalić, czy element został zwinięty PRZED zapadnięciem. Natomiast detektory zdarzeń uruchamiają się dopiero później.

//Will return true if uncollapsed 
$('#collapseDiv').hasClass('in'); 

//Will return true if in the process of collapsing 
$('#collapseDiv').hasClass('collapsing'); 

//Will return true if collapsed 
$('#collapseDiv').hasClass('collapse');