使用 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>