Question

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

block4

我需要这个，因为如果点击的元素具有特定的数据属性，我希望防止折叠。另一种选择是使用$('.collapse').on('show.bs.collapse', function (e) { // Get clicked element that initiated the collapse... });来挂钩，但是在点击时还有其他需要运行的事件，所以这似乎不适合我。在DOM中搜索最近的锚点或类似的东西也不会起作用，因为在彼此旁边有多个锚点。

Answer 1

试试这个

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

Answer 2

由于我的案例在彼此旁边有多个锚点（即忽略常规的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 3

这应该有效：http://jsfiddle.net/8s0mn0f4/3/

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

Answer 4

此解决方案循环所有折叠锚点并搜索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 5

当bootstrap的崩溃触发时，会显示div元素，它的类变为panel-collapse collapse in。

我需要这个，所以我可以将内容放入新打开的面板中。您可以向该元素添加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);
});

Answer 6

这在Bootstrap 4.2中起作用

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

Answer 7

这对我有用：

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

如何在Bootstrap崩溃事件中获取单击的元素？

7 个答案: