twitter-bootstrap 如何在 Bootstrap 折叠事件中获取被点击的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30596773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the clicked element in Bootstrap collapse event?
提问by Propaganistas
I am having trouble to find the clicked anchor element in the collapse event using Bootstrap 3.3.4.:
我无法使用 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.
我需要这个是因为如果被点击的元素具有特定的数据属性，我想防止折叠。另一种选择是通过使用挂钩.on('click', function())，但是还有其他需要运行的点击时发生的事件，所以这对我来说似乎是不可行的。在 DOM 中搜索最近的锚点或类似的东西不会起作用，因为有多个彼此相邻的锚点。
采纳答案by Propaganistas
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:
由于我的案例具有彼此相邻的多个锚点（即不考虑常规 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') + "']")
});
回答by Alexey Kosov
Try this
试试这个
$element.on('shown.bs.collapse', function(e) {
var $clickedBtn = $(e.target).data('bs.collapse').$trigger;
});
回答by user3464977
This is working in Bootstrap 4.2
这在 Bootstrap 4.2 中有效
$(".collapse").on('shown.bs.collapse', function(e){
$clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
});
回答by Toni Feistauer
this should work: http://jsfiddle.net/8s0mn0f4/3/
这应该有效：http: //jsfiddle.net/8s0mn0f4/3/
console.log($(e.target).siblings('.panel-heading').find('a'))
回答by redrobot
This solution loops all collapse anchors and searches for the href target. It will work for both references by #id and by .class
此解决方案循环所有折叠锚点并搜索 href 目标。它适用于 #id 和 .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");
}
})
}
回答by Adrian
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);
})
回答by Joe
When bootstrap's collapse fires, and a div element is shown it's class becomes panel-collapse collapse in.
当引导程序的折叠触发时，显示一个 div 元素，它的类变为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.
我需要这个，所以我可以将内容ajax到新打开的面板中。您可以向该元素添加 id 或 data- 属性，以帮助识别锚点。
HTML
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
Javascript
$('.collapse').on("shown.bs.collapse", function (e) {
var clicked = $(".panel-collapse.collapse.in").attr("id");
alert("collapse " + clicked);
});
