Javascript 根据隐藏的数字更改容器的宽度-jQuery

我在根据隐藏和显示的内容更改容器宽度时遇到问题

我有5个容器嵌套在一个主容器内。每个嵌套容器大约占用主容器宽度的20%。我需要能够折叠两个容器，同时仍然消耗主容器100%的宽度

基本上，如果用户单击可折叠容器1号，则单击的容器宽度将收缩到

5%

，而所有其他容器（4）将增长到大约

23%

，以填充空间

现在，如果用户单击第二个可折叠容器，而另一个容器仍处于折叠状态，则单击的容器也应收缩到

5%

，而其他容器（3）应增长到大约

30%

，以消耗剩余空间

因此，在上面的场景中，单击两个可折叠容器时，应该有两个

5%

宽容器和三个

30%

宽容器

现在，如果两个容器都折叠起来，并且用户单击其中一个折叠的容器，那么单击的容器应该会增长，而另一个折叠的容器的大小将保持在

5%

，而所有其他容器的大小将变为大约

23%

。如果单击剩余的折叠容器，则单击的容器以及所有其他容器的大小应更改为

20%

，以便它们都填充主容器的宽度

我有点让它工作了。您可以看到，当您单击

Four

然后单击

Five

时，容器会收缩，而其他容器会增长。但是，当您再次单击它们以使其增长时，其他容器的大小不会改变

我已经玩了很长一段时间，现在使它的工作，它应该是非常简单的，但出于某种原因，它是给我适合

希望这是有道理的。我已经包括了下面的一些代码以及一个示例

HTML:

一
二
三
四
五

我根据从您在中的问题中了解到的内容制作了一个工作示例。在本例中，单击第一个

div

，其宽度将更改为5%，而其他div的宽度将增加到几乎23.75%。在这种情况下，当您单击第二个

div

时，它将为其执行5%的操作，而其余部分（第一个div除外）几乎达到30%

---

如果您需要任何其他功能，您可以简单地添加到示例中的JS逻辑。

我宁愿通过切换父元素上的类来解决这个问题。您有点接近了。看看我更新的问题和我添加的代码笔。我得到了接近我需要的东西，但代码中仍然有一个bug。@Yamaha32088:我现在得到了你的问题，我相应地修复了这个例子。你现在可以查一下

$('#collapse1 .header, #collapse2 .header').on('click', function() {
  clicked = $(this).parent();
  $(clicked).toggleClass('collapsed-column');

  var num = $('.collapsed-column').length;

  if (num == 1) {
    $('.col-5ths').not(clicked).toggleClass('collapsed-1');
    $('.col-5ths').removeClass('collapsed-2')
    if ($(clicked).hasClass('.collapsed-2')) {
      $(clicked).addClass('.collapsed-1');
    }
  } else if (num == 2) {
    $('.col-5ths').not(clicked).toggleClass('collapsed-2');

  } else {
    $('.col-5ths').removeClass('collapsed-2 collapsed-1 collapsed-column')
  }
});

<div class="container">
  <div class="col-5ths">
    <div class="header">
      one
    </div>
  </div>
  <div class="col-5ths">
    <div class="header">
      two
    </div>
  </div>
  <div class="col-5ths"><div class="header">
      three
    </div></div>
  <div class="col-5ths collapsible" id="collapse1">
    <div class="header">
      four
    </div>
  </div>
  <div class="col-5ths collapsible" id="collapse2">
    <div class="header">
      five
    </div>
  </div>
</div>