在show.bs.collapse上点击元素，使用bootstrap 4 collapse

Question

我有一系列按钮，所有按钮都调用同一个面板。我正在尝试获取打开面板的点击元素，以便在面板中动态注入一些数据。

如果可能的话，我需要获得show.bs.collapse事件上的元素，这样我就可以在面板显示之前注入数据

这是我的html:

<div class='container'>
<div class='buttons'>
<a id='link-one' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link One</a>
<a id='link-two' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link Two</a>
<a id='link-three' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link Three</a>
</div>
<div id='panel' class='panel collapse'>
*dynamic content related to link triggered*
</div>
</div>

我发现了这些关于这个问题的帖子：

Bootstrap如何点击元素以折叠

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

引导模式相关目标未定义

但不幸的是，它们都不起作用，也没有给我答案。

我试图找到event.relatedTarget，但在show.bs.collapse事件中没有这样的东西

Answer 1

我也没有看到Bootstrap提供点击的元素，所以你可以自己跟踪它并在回调中使用它。

let currentButtonId;
$('.buttons a').click(e => {
currentButtonId = e.target.id;
});
$('#panel').on('show.bs.collapse', e => {
$('#panel').text(currentButtonId + ' was clicked');
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class='container'>
<div class='buttons'>
<a id='link-one' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link One</a>
<a id='link-two' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link Two</a>
<a id='link-three' data-toggle='collapse' href='#panel' aria-expanded='false' aria-controls='panel'>Link Three</a>
</div>
<div id='panel' class='panel collapse'>
*dynamic content related to link triggered*
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>