如何在 Bootstrap 折叠事件中获取被点击的元素？答案

【问题标题】：How to get the clicked element in Bootstrap collapse event?如何在 Bootstrap 折叠事件中获取被点击的元素？
【发布时间】：2015-06-02 12:55:58
【问题描述】：

我无法使用 Bootstrap 3.3.4 在折叠事件中找到单击的锚元素。：

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

我需要这个，因为如果单击的元素具有特定的数据属性，我想防止折叠。另一种选择是使用.on('click', function()) 进行挂接，但是单击时会发生其他需要运行的事件，所以这对我来说似乎是不行的。在 DOM 中搜索最近的锚点或类似的东西也不会奏效，因为有多个锚点彼此相邻。

【问题讨论】：

jsfiddle.net/sheshu036/8s0mn0f4/5 像这样你有多个锚标签？
锚点放置在页面的其他位置，彼此相邻（忽略默认的 Boostrap HTML 结构）。

标签： jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

由于我的案例具有多个相邻的锚点（即忽略常规引导结构），我最终使用折叠 div 的 ID 搜索单击的锚点：

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

【讨论】：

如果href中的目标设置为类，这将不起作用

【解决方案2】：

试试这个

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

【讨论】：

这是正确答案，无论文档的结构如何，都可以使用。
这仅适用于shown.bs.collapse 事件。不适用于show.bs.collapse，因为当时没有设置数据。

【解决方案3】：

这适用于 Bootstrap 4.2

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

【讨论】：

【解决方案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); 
})

【讨论】：

【解决方案5】：

这应该可以：http://jsfiddle.net/8s0mn0f4/3/

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

【讨论】：

多个锚点并排相邻。我只需要点击的那个。
然后可能在链接上编写自己的点击监听器，不要使用引导 API

【解决方案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");
            }
        })
    }

【讨论】：

【解决方案7】：

当 bootstrap 的折叠触发并显示 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);
});

【讨论】：