手风琴的宽度越来越大

Question

我的网站上有一个jQuery手风琴，所有选项卡都打开了

我想要的是关闭的选项卡的宽度（当关闭时）以关闭的顺序增加

此处的示例

我要发生的事情是，如果有10个选项卡，并且只有前两个关闭，则tab1的宽度应为95％，而tab2的应为100％。 如果关闭了选项卡3，则选项卡1的宽度= 90％，选项卡2 = 95％以及选项卡3 = 100％。

这是我尝试过的：

我添加了一个jQuery，可将类closed切换到关闭的标签页，并尝试使用nth-last-child进行替换

.tab.closed:nth-last-child(1) {
  width: 100%
}

.tab.closed:nth-last-child(2) {
  width: 95%
}

但是正在发生的事情是，伪类正在将自身追加到选项卡的主类中，而不仅仅是追加到带有closed类的选项卡中。

此方法合乎逻辑吗？ 还是有更好的方法来做到这一点？

编辑：在下面添加了一个代码段。

$('.panel-title a').click(function() {
  if ($('.collapse').hasClass('in')) {
    $(this).closest('.panel.panel-white').toggleClass("open");
    $(this).closest('.panel.panel-white').toggleClass("closed");
  }
});

.panel.panel-white .panel-heading {
  background: #0769AD;
}

.panel.panel-white .panel-heading a {
  color: white
}

.closed:nth-last-child(1) {
  width: 80%;
}

.closed:nth-last-child(1) {
  width: 80%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="panel-group content-group-lg">
  <div class="panel panel-white open">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a data-toggle="collapse" href="#collapse-group1">Collapsible Item #1</a>
      </h6>
    </div>
    <div id="collapse-group1" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
      </div>
    </div>
  </div>

  <div class="panel panel-white closed">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse-group2">Collapsible Item #2</a>
      </h6>
    </div>
    <div id="collapse-group2" class="panel-collapse collapse">
      <div class="panel-body">
        Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
      </div>
    </div>
  </div>

  <div class="panel panel-white closed">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse-group3">Collapsible Item #3</a>
      </h6>
    </div>
    <div id="collapse-group3" class="panel-collapse collapse">
      <div class="panel-body">
        3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
      </div>
    </div>
  </div>
</div>
<!-- /basic collapsible -->