我从我的HTML代码片段。我可以问我如何动态地改变每个 Bootstrap 折叠组件内的每个进度条的宽度吗？我的预期输出是，当我点击折叠组件时，它将显示它里面的所有进度条，每个进度条都在前进，直到达到各自的期望值。

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
        Link with href
      </a>
  </p>
</p>
<div class="collapse" id="collapseExample">
    <div class="skill mb-4">
        <div class="d-flex justify-content-between">
            <h6 class="font-weight-bold">CSS</h6>
            <h6 class="font-weight-bold">85%</h6>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="skill mb-4">
        <div class="d-flex justify-content-between">
            <h6 class="font-weight-bold">HTML</h6>
            <h6 class="font-weight-bold">95%</h6>
        </div>
        <div class="progress">
            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</div>
<div class="collapse1" id="collapseExample1">
    <div class="skill mb-4">
        <div class="d-flex justify-content-between">
            <h6 class="font-weight-bold">CSS</h6>
            <h6 class="font-weight-bold">85%</h6>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="skill mb-4">
        <div class="d-flex justify-content-between">
            <h6 class="font-weight-bold">HTML</h6>
            <h6 class="font-weight-bold">95%</h6>
        </div>
        <div class="progress">
            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</div>

字符串
这是我放在我的JavaScript，但它没有工作。我只是一个初学者在web开发。我希望你能理解我问这一个。我已经尝试从这个平台挖掘出来，但我还没有发现任何线索的动态进度条内的折叠组件。再次感谢您的帮助。

(function ($) {
    "use strict";
    /*==================== COLLAPSE ===========================*/ 
    $('#collapseExample').on('show.bs.collapse', function () {
        $('.collapse .skill .progress .progress-bar').each(function () {
            $(this).css("width", $(this).attr("aria-valuenow") + '%');
        });
    });
})(jQuery);

型
我在这里放置了代码片段的函数。如果你无法访问它，请告诉我。我的预期输出就像我在script.js中找到的JavaScript中由waypoint函数驱动的6个进度条。我希望每个折叠组件中的两个进度条的功能与我在progress-bar.js中尝试实现的功能相同，但它也可以集成到script.js中。folder containing the snippet of the code