How to get the clicked element in Bootstrap collap

问题:

I am having trouble to find the clicked anchor element in the collapse event using Bootstrap 3.3.4.:

$('.collapse').on('show.bs.collapse', function (e) {
    // Get clicked element that initiated the collapse...
});

I need this because I'd like to prevent collapsing if the clicked element has a certain data attribute. Another option would be to hook in by using .on('click', function()), however there are other events that occur on click that need to run so this seems a no-go to me. Searching in the DOM for the closest anchor or something similar won't work as well since there are multiple anchors next to eachother.

回答1:

Since my case featured multiple anchors next to eachother (viz. disregarding regular Bootstrap structure), I ended up searching for the clicked anchor by using the collapsing div's ID:

$('.collapse').on('show.bs.collapse', function (e) {
    // Get clicked element that initiated the collapse...
    clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']")
});

回答2:

Try this

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

回答3:

this should work: http://jsfiddle.net/8s0mn0f4/3/

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

回答4:

This is working in Bootstrap 4.2

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

回答5:

This solution loops all collapse anchors and searches for the href target. It will work for both references by #id and by .class

In this example I use it to add the collapsed class to the clicked element.

    $(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");
            }
        })
    }

回答6:

When bootstrap's collapse fires, and a div element is shown it's class becomes panel-collapse collapse in.

I needed this so I could ajax content into the newly opened panel. You can add an id or data- attribute to that element that can help identify the anchor.

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

回答7:

This worked for me:

$('#collapse').on('shown.bs.collapse', function (e) {
   // Get the clicked button element's text...
   questionTitle = $(e.target).parent().find('button').text().trim();
   console.log(questionTitle); 
})