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

Question

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

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

基本上，如果用户单击第一个可折叠容器，则单击的容器宽度会缩小到 5%，而所有其他容器 (4) 会增长到大约 23% 以填充在空间中。

现在，如果用户单击第二个可折叠容器，而另一个容器仍处于折叠状态，则单击的容器也应缩小到 5%，而其他容器 (3) 应大致增长到 30% 消耗剩余空间。

所以在上面的场景中，点击了两个可折叠容器，应该有两个 5% 宽的容器和三个 30% 宽的容器。

现在，如果两个容器都折叠并且用户单击其中一个折叠的容器，则被点击的容器应该增长，而另一个折叠的容器的大小为 5%，而所有其他容器的大小更改为大致 23%。如果单击剩余的折叠容器，则单击的容器以及所有其他容器的大小应更改为 20%，以便它们都填满主容器的宽度。

我有点让它工作了。您可以看到，当您单击 Four 然后单击 Five 时，容器缩小而其他容器增大。但是当您再次单击它们使它们变大时，其他容器不会改变大小。

我已经玩了很长时间才让它工作，它应该非常简单，但出于某种原因，它让我感到不适。

希望这是有道理的。我在下面包含了一些代码以及 codepen .

$('#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')
  }
});

HTML:

<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>

Answer 1

我根据我对您在 HERE 中的问题的理解做了一个工作示例.在此示例中，您单击第一个 div，它的宽度变为 5%，而其他宽度增加到几乎 23.75%。在这种情况下，当您单击第二个 div 时，它将完成 5%，其余部分(第一个 div 除外)几乎达到 30%。

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