Come determinare se una compressione di bootstrap si sta aprendo o chiudendo?

Question

Se ho un crollo di bootstrap, come posso determinare da un evento click in caso di apertura o chiusura del collasso?

Ecco il mio evento click o forse c'è un modo migliore per utilizzare un evento click?

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

È possibile guardare l'evento hidden.bs.collapse

vedere violino: http://jsfiddle.net/kyeuvx1d/

Answer 2

Prova:

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

(basato su https://stackoverflow.com/a/18147817/2033574 (Kevin menzionato) e http://www.bootply.com/73101)

Answer 3

Bootstrap utilizza l'attributo aria-espanso per mostrare vero o falso se la regione è compressa oppure no.

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

Answer 4

Avevo bisogno di un modo per determinare se l'elemento era collassato PRIMA che effettivamente collassasse. Mentre gli ascoltatori di eventi si attivano solo in seguito.

//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');