使用 bootstrap 4 Collapse 在 show.bs.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 折叠事件中获取被点击的元素？

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>