显示和隐藏一个div使用CSS问题在按钮单击上添加时间

Question

我使用了引导程序功能来使显示/隐藏一个div的功能一次像这样单击

 [data-toggle="collapse"].collapsed .if-not-collapsed { display: none; } [data-toggle="collapse"]:not(.collapsed) .if-collapsed { display: none; } 

 <button class="collapsed" data-toggle="collapse" href="#collapseExample"> <span class="if-collapsed">Add more div</span> <span class="if-not-collapsed">Remove more div</span> </button> <div class="collapse" id="collapseExample"> //some content <button class="collapsed" data-toggle="collapse" href="#collapseExample2"> <span class="if-collapsed">Add 2nd last div</span> <span class="if-not-collapsed">Remove 2nd last div</span> </button> </div> <div class="collapse" id="collapseExample2"> //Similar code as above </div> 

这使我可以将按钮放在折叠的div内，一旦初始折叠的div打开，我就可以单击并添加更多div。 这使我一次可以添加一个div。

如果用户单击添加第二个最后一个div按钮，然后单击第三个最后一个div按钮，依此类推..然后单击删除“第二个最后一个div”按钮，则它下方的所有其他div都将显示，如第三个最后一个div和最后一个div。 有没有一种通过CSS或Javascript的方法，一旦父div关闭，我就可以隐藏所有连续的div。

Answer 1

您可能想要一些多个选择器规则，例如

[data-toggle="collapse"].collapsed .if-not-collapsed, 
[data-toggle="collapse"]:not(.collapsed) .if-collapsed,
[data-toggle="collapse"].collapsed~[data-toggle="collapse"]
{
  display: none;
}

~是后续的兄弟姐妹选择器。 您可以用逗号列出多个选择器。

更具体如

[data-toggle="collapse"].collapsed~[data-toggle="collapse"]>.some-child

如果您不希望使整个div元素不可见。