J'ai des difficultés à trouver l'élément d'ancrage cliqué dans l'événement collapse à l'aide de Bootstrap 3.3.4.:
$('.collapse').on('show.bs.collapse', function (e) {
// Get clicked element that initiated the collapse...
});
J'ai besoin de cela car je voudrais éviter la réduction si l'élément cliqué a un certain attribut de données. Une autre option consisterait à utiliser .on('click', function())
, mais d’autres événements se produisant au clic doivent être exécutés, ce qui me semble impossible. Rechercher dans le DOM l'ancre la plus proche ou quelque chose de similaire ne fonctionnera pas aussi bien, car il y a plusieurs ancres côte à côte.
Étant donné que mon cas comportait plusieurs ancres côte à côte (à savoir, sans tenir compte de la structure Bootstrap normale), j'ai fini par rechercher l'ancre cliquée à l'aide de l'ID du diviseur:
$('.collapse').on('show.bs.collapse', function (e) {
// Get clicked element that initiated the collapse...
clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']")
});
Essaye ça
$element.on('shown.bs.collapse', function(e) {
var $clickedBtn = $(e.target).data('bs.collapse').$trigger;
});
cela devrait fonctionner: http://jsfiddle.net/8s0mn0f4/3/
console.log($(e.target).siblings('.panel-heading').find('a'))
Cela fonctionne dans Bootstrap 4.2
$(".collapse").on('shown.bs.collapse', function(e){
$clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
});
Cette solution boucle toutes les ancres réduites et recherche la cible href. Cela fonctionnera pour les deux références par #id et par .class
Dans cet exemple, je l'utilise pour ajouter la classe réduite à l'élément cliqué.
$(document).ready(function () {
checkCollapsed();
})
function checkCollapsed() {
$('.collapse').on('shown.bs.collapse', function (e) {
triggerCollapsedClass();
}).on('hidden.bs.collapse', function (e) {
triggerCollapsedClass();
});
}
function triggerCollapsedClass() {
$("[data-toggle=collapse]").each(function (i, item) {
var selector = $(item).attr("href");
if ($(selector).hasClass("in")) {
$(item).addClass("collapsed");
} else {
$(item).removeClass("collapsed");
}
})
}
Lorsque la fermeture de bootstrap est déclenchée et qu'un élément div est affiché, sa classe devient panel-collapse collapse in
.
J'avais besoin de cela pour pouvoir insérer du contenu dans le nouveau panneau. Vous pouvez ajouter à cet élément un identifiant ou un attribut de données pouvant aider à identifier l'ancre.
HTML
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-X" aria-expanded="true" aria-controls="accordion-x" id="accordionanchor-X">
Information X
</a>
…
<div id="collapse-x" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="pageheading-X">
<div class="panel-body">
…
</div>
</div>
Javascript
$('.collapse').on("shown.bs.collapse", function (e) {
var clicked = $(".panel-collapse.collapse.in").attr("id");
alert("collapse " + clicked);
});