用jQuery动态修改Bootstrap折叠组件内进度条的aria-valuenow和width属性

问题原因 #

• 第二个折叠容器#collapseExample1的class错误设置为collapse1，不符合Bootstrap折叠组件要求，无法触发官方的show.bs.collapse事件
• 原有JS仅绑定了单个折叠容器#collapseExample的事件，没有覆盖所有折叠组件
• 进度条选择器为全局匹配，会导致点击任意折叠面板时，所有折叠面板内的进度条都被修改
• 没有给进度条配置宽度过渡属性，无法呈现动态推进的动画效果

实现步骤 #

1. 修正HTML错误 #

将第二个折叠容器的class改为Bootstrap要求的collapse：

<!-- 修改前 -->
<div class="collapse1" id="collapseExample1">
<!-- 修改后 -->
<div class="collapse" id="collapseExample1">

2. 添加进度条动画CSS #

给进度条增加宽度过渡属性，控制动画时长和缓动效果：

.progress-bar {
  /* 1.5s为动画总时长，可根据需求自行调整 */
  transition: width 1.5s ease;
}

3. 替换原有JS代码 #

改为通用绑定所有折叠组件，仅操作当前展开容器内的进度条：

(function ($) {
    "use strict";
    // 绑定所有折叠组件的展开事件
    $('.collapse').on('show.bs.collapse', function () {
        // 仅查找当前展开容器内的进度条进行赋值
        $(this).find('.progress-bar').each(function () {
            const targetVal = $(this).attr('aria-valuenow');
            $(this).css('width', targetVal + '%');
        });
    });

    // 可选功能：折叠收起时重置进度条宽度，下次展开重新播放动画
    $('.collapse').on('hide.bs.collapse', function () {
        $(this).find('.progress-bar').css('width', '0%');
    });
})(jQuery);

如果你需要和现有waypoint驱动的进度条效果完全一致，直接把上面css('width', targetVal + '%')的部分替换为你waypoint里的进度动画逻辑即可。

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