Si j'ai un collapsus d'amorçage, comment puis-je déterminer, à partir d'un événement click, si le collapsus s'ouvre ou se ferme?
Voici mon événement de clic ou peut-être qu'il y a une meilleure façon d'utiliser un événement de clic?
$(document).on("click", "a.register-student-link", function() {
// do some stuff to check if opening or closing
}
<div>
<a [email protected] class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
Register Student
</a>
</div>
Bootstrap utilise l'attribut aria-expand pour indiquer true ou false si la région est réduite ou non.
var isExpanded = $(collapsableRegion).attr("aria-expanded");
Essayer:
$('#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 [email protected] 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>
(basé sur https://stackoverflow.com/a/18147817/2033574 (Kevin mentionné) et http://www.bootply.com/73101 )
J'avais besoin d'un moyen de déterminer si l'élément était effondré AVANT l'effondrement réel. Alors que les écouteurs d’événements ne se déclenchent qu’après.
//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');
Vous pouvez regarder l'événement hidden.bs.collapse
voir le violon: http://jsfiddle.net/kyeuvx1d/
function checkStatus() {
if($('#item1').hasClass('in')) {
alert('closing')
} else {
alert('opening')
}
}
checkStatus()