在Bootstrap 4 Collapse的show.bs.collapse事件中获取触发元素

我有一组按钮，均用于展开同一个面板。希望获取触发面板展开的点击元素，以便向面板中动态注入数据。需要尽可能在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>

尝试过查找相关方案，但show.bs.collapse事件中无法获取event.relatedTarget属性，现有方法均无效。

由于Bootstrap折叠面板的show.bs.collapse事件默认不提供触发元素的引用，我们可以通过提前记录点击的触发元素来实现需求：

原生JavaScript实现 #

// 存储触发元素的变量
let activeTrigger;

// 给所有折叠触发元素绑定点击事件，记录当前点击的元素
document.querySelectorAll('[data-toggle="collapse"]').forEach(trigger => {
  trigger.addEventListener('click', function() {
    activeTrigger = this;
  });
});

// 监听面板的show.bs.collapse事件，使用已记录的触发元素注入数据
document.getElementById('panel').addEventListener('show.bs.collapse', function() {
  if (!activeTrigger) return;
  
  // 根据触发元素的ID生成对应内容
  const contentMap = {
    'link-one': '这是链接一的专属内容',
    'link-two': '这是链接二的专属内容',
    'link-three': '这是链接三的专属内容'
  };
  
  // 注入动态内容
  this.innerHTML = contentMap[activeTrigger.id] || '默认内容';
});

jQuery实现（适用于依赖jQuery的Bootstrap版本） #

let $activeTrigger;

// 记录点击的触发元素
$('[data-toggle="collapse"]').on('click', function() {
  $activeTrigger = $(this);
});

// 在show事件中注入数据
$('#panel').on('show.bs.collapse', function() {
  if (!$activeTrigger) return;
  
  const contentMap = {
    'link-one': '链接一的动态内容',
    'link-two': '链接二的动态内容',
    'link-three': '链接三的动态内容'
  };
  
  $(this).html(contentMap[$activeTrigger.attr('id')] || '默认内容');
});

原理说明 #

1. 先给所有带有data-toggle="collapse"属性的触发元素绑定点击事件，将当前点击的元素存储到变量中；
2. 在面板的show.bs.collapse事件触发时，直接使用之前存储的触发元素，根据其属性（如ID、自定义属性等）生成并注入对应内容；
3. 这种方式能确保在面板显示前完成数据注入，完全符合需求。

内容的提问来源于stack exchange，提问作者Eldev