在Bootstrap中动态更改崩溃时的活动链接类

Question

我希望为每个崩溃项目使我的代码动态化。

现在，我必须为每个折叠项添加JQuery代码以更改活动链接。我希望通过某种方式，我可以在添加链接时添加任何其他代码。

这是HTML

<div class="panel-group" id="accordion">

      <div class="filter-nav"><span class="filter-list">-</span>Filter By<span id="filter-close">X</span></div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title1">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
                    First Link
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body">
                  Hello world 1
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title active-panel" id="panel-title2" data-title="2">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="">
                    Second Link
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse in" style="height: auto;">
                <div class="panel-body">
                    <form class="industry">
                      <input type="checkbox" name="industry" value="Aerospace" id="Aerospace"><label for="Aerospace"><span></span>Aerospace &amp; Defense</label>
                      <input type="checkbox" name="industry" value="Agriculture" id="Agriculture"><label for="Agriculture"><span></span>Agriculture</label>
                      <input type="checkbox" name="industry" value="Automotive" id="Automotive"><label for="Automotive"><span></span>Automotive &amp; Assembly</label>
                      <input type="checkbox" name="industry" value="Materials" id="Materials"><label for="Materials"><span></span>Basic Materials</label>

                    </form>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title3" data-title="3">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
                    Third Link
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body">
                  Hello world 3
                </div>
              </div>
            </div>


            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title4">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="collapsed">
                    Forth Link
                  </a>
                </h4>
              </div>
              <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body">
                  Hello world 4
                </div>
              </div>

        </div>

</div>

JQUERY Code

$('#collapseOne').on('show.bs.collapse', function () {
  $("#panel-title1").addClass("active-panel");
});

$('#collapseOne').on('hide.bs.collapse', function () {
  $("#panel-title1").removeClass("active-panel");
});

$('#collapseTwo').on('show.bs.collapse', function () {
  $("#panel-title2").addClass("active-panel");
});

$('#collapseTwo').on('hide.bs.collapse', function () {
  $("#panel-title2").removeClass("active-panel");
});

$('#collapseThree').on('show.bs.collapse', function () {
  $("#panel-title3").addClass("active-panel");
});

$('#collapseThree').on('hide.bs.collapse', function () {
  $("#panel-title3").removeClass("active-panel");
});

$('#collapseFour').on('show.bs.collapse', function () {
  $("#panel-title4").addClass("active-panel");
});

$('#collapseFour').on('hide.bs.collapse', function () {
  $("#panel-title4").removeClass("active-panel");
});

它工作正常，但我只是希望让我的JS代码动态化。

由于

Answer 1

类似的东西：

$('.panel-collapse').on('show.bs.collapse',function(){
    $(this).prev('.panel-heading').find('.panel-title').addClass("active-panel");
});

$('.panel-collapse').on('hide.bs.collapse',function(){
    $(this).prev('.panel-heading').find('.panel-title').removeClass("active-panel");
});

以避免ID中的硬连线，但依赖于HTML结构