web-dev-qa-db-fra.com

Comment obtenir l'élément cliqué dans l'événement de réduction Bootstrap?

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.

jquerytwitter-bootstraptwitter-bootstrap-3
10
Propaganistas

É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') + "']")
});
7
Propaganistas

Essaye ça 

$element.on('shown.bs.collapse', function(e) {
    var $clickedBtn = $(e.target).data('bs.collapse').$trigger;
});
8
Alexey Kosov

cela devrait fonctionner: http://jsfiddle.net/8s0mn0f4/3/

    console.log($(e.target).siblings('.panel-heading').find('a'))
2
Toni Feistauer

Cela fonctionne dans Bootstrap 4.2

$(".collapse").on('shown.bs.collapse', function(e){
    $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
});
0
user3464977

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");
            }
        })
    }
0
redrobot

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);
});
0
Joe