Bootstrap：如何获取触发面板折叠/展开的具体点击元素

嘿，我知道你在纠结Bootstrap折叠面板的触发元素区分问题，这就给你搞定！核心问题在于你之前没拿到真正触发操作的单个元素——Bootstrap的collapse事件里，e.target指向的是折叠面板本身，而e.relatedTarget才是你点击的那个链接元素！用它就能精准区分是linkEdit还是linkShow了。

下面是符合你需求的完整代码：

$(document).ready(function () {
  // 监听折叠面板的隐藏事件
  $('#collapsePanel').on('hide.bs.collapse', function (e) {
    // 获取当前点击的触发元素
    const clickedTrigger = $(e.relatedTarget);
    
    // 如果是linkEdit触发的折叠，直接阻止
    if (clickedTrigger.is('#linkEdit')) {
      e.preventDefault();
      return false;
    }
    // linkShow触发的话，允许折叠，无需额外操作
  });

  // 可选：强化linkEdit的行为——仅当面板折叠时才触发展开
  $('#linkEdit').on('click', function () {
    const panel = $('#collapsePanel');
    if (!panel.hasClass('show')) {
      panel.collapse('show');
    }
  });
});

关键说明： #

• e.relatedTarget的作用：这个属性是Bootstrap collapse事件专门提供的，用来返回触发当前折叠/展开操作的DOM元素，完美解决你之前拿到两个触发元素的问题。
• linkEdit的行为控制：在hide.bs.collapse事件中阻止linkEdit触发的折叠，确保它只能展开面板；额外的click监听则是为了避免面板已经展开时，点击linkEdit产生无效的折叠触发请求。
• 选择器匹配：确保你的两个链接有唯一的标识，比如给linkEdit加id="linkEdit"，linkShow加id="linkShow"，如果用类选择器的话，把is('#linkEdit')改成is('.link-edit')就行。

这样设置后，linkEdit只能执行展开操作，linkShow则可以自由切换折叠/展开状态啦！

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