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

Question

我在使用Bootstrap 3.3.4的折叠事件中遇到了找不到所点击的锚点元素的问题：

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

我需要这个功能是因为我想要防止折叠，如果所点击的元素具有某个特定的数据属性。另一个选项是使用.on('click', function())进行挂钩，但是由于点击时发生了其他事件需要运行，因此这对我来说似乎不可行。在DOM中搜索最近的锚点或类似的内容也行不通，因为多个锚点彼此相邻。

- Propaganistas

---

你可以像这样使用多个锚点标签：http://jsfiddle.net/sheshu036/8s0mn0f4/5/。 - sheshadri

锚点被放置在页面的其他位置，全部彼此相邻（忽略默认的Boostrap HTML结构）。 - Propaganistas

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

- Propaganistas

---

如果在href中设置目标为类，则此方法将无效。 - redrobot

Answer 2

试一试

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

- Alexey Kosov

---

这是正确的答案，无论文档如何结构都可以使用。 - Josh Adell

这仅适用于shown.bs.collapse事件，而不适用于show.bs.collapse，因为此时数据尚未设置。 - dtrunk

Answer 3

这在Bootstrap 4.2中可行。

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

- user3464977

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

- Adrian

Answer 5

我希望这个可以工作: http://jsfiddle.net/8s0mn0f4/3/

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

- Toni Feistauer

---

有多个相邻的锚点。我只需要点击的那一个。 - Propaganistas

然后可以在链接上编写自己的点击监听器，而不使用bootstrap API。 - Toni Feistauer

Answer 6

这个解决方案循环遍历所有折叠锚点并搜索 href 目标。它适用于通过 #id 和 .class 引用的两种情况。

在这个例子中，我使用它将 collapsed 类添加到被点击的元素。

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

- redrobot

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

- Joe