如何实现Bootstrap 5折叠面板无ID绑定的通用caret图标切换逻辑

依托Bootstrap 5折叠组件原生事件实现，无需为每个面板单独绑定ID逻辑，全局仅需一段代码即可适配所有折叠面板。

完整JS代码 #

$(function () {
  // 遍历所有带caret-collapse类的折叠触发元素
  $('.caret-collapse').each(function () {
    const $trigger = $(this)
    const $caretContainer = $trigger.find('.caret-collapse-container')
    // 获取对应的折叠面板选择器
    const targetSelector = $trigger.attr('href') || $trigger.attr('data-bs-target')
    const $targetPanel = $(targetSelector)

    // 初始化图标：匹配面板当前的展开/收起状态
    if ($targetPanel.hasClass('show')) {
      $caretContainer.html('<i class="fa fa-caret-down"></i>')
    } else {
      $caretContainer.html('<i class="fa fa-caret-right"></i>')
    }

    // 绑定面板展开事件
    $targetPanel.on('show.bs.collapse', function () {
      $caretContainer.find('i').removeClass('fa-caret-right').addClass('fa-caret-down')
    })

    // 绑定面板收起事件
    $targetPanel.on('hide.bs.collapse', function () {
      $caretContainer.find('i').removeClass('fa-caret-down').addClass('fa-caret-right')
    })
  })
})

使用方法 #

你完全可以沿用自己设想的HTML结构，不需要额外修改：

<!-- 折叠触发元素 -->
<h4 class="border caret-collapse" role="button" data-bs-toggle="collapse" href="#plinks">
  <span class="caret-collapse-container"></span>
  Plinks
</h4>
<!-- 折叠面板 -->
<div class="collapse" id="plinks">
  面板内容
</div>

新增折叠面板时，只需要给触发元素加caret-collapse类、插入空的caret-collapse-container容器即可，无需补充任何JS逻辑。

内容的提问来源于stack exchange，提问作者Scot's Scripts