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逻辑。

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

1 个答案: