如何在 Bootstrap 折疊事件中獲取被點擊的元素？

Question

我無法使用 Bootstrap 3.3.4 在折疊事件中找到單擊的錨元素：

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

我需要這個，因為如果被點擊的元素具有特定的數據屬性，我想防止折疊。 另一種選擇是使用.on('click', function())進行掛鈎，但是單擊時會發生其他需要運行的事件，因此這對我來說似乎是.on('click', function()) 。 在 DOM 中搜索最近的錨點或類似的東西不會起作用，因為有多個彼此相鄰的錨點。

Answer 1

由於我的案例具有彼此相鄰的多個錨點（即忽略常規 Bootstrap 結構），我最終使用折疊 div 的 ID 搜索點擊的錨點：

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

Answer 2

嘗試這個

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

Answer 3

這在 Bootstrap 4.2 中有效

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

Answer 4

這對我有用：

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

Answer 5

這應該有效： http : //jsfiddle.net/8s0mn0f4/3/

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

Answer 6

此解決方案循環所有折疊錨點並搜索 href 目標。 它適用於 #id 和 .class 的兩個引用

在這個例子中，我使用它來將折疊的類添加到被點擊的元素。

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

Answer 7

當引導程序的折疊觸發並顯示一個 div 元素時，它的類panel-collapse collapse in .

我需要這個，所以我可以將內容ajax到新打開的面板中。 您可以向該元素添加 id 或 data- 屬性，以幫助識別錨點。

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