Question

可能重复：
jQuery div content partial hide, show all

我知道这已经完成，我在人们的网站上看过，但我找不到它。所以我在这里。

我需要在具有相同类的页面上设置或列出多个div（4或5），并将每个div设置为大约50像素高。我需要它们扩展到div到内容的完整高度。假设使用show / hide或slideUp / slideDown。当崩溃发生时，将div折叠回50像素。我想再次使用同一个类的多个div并相互独立激发。

之前有人见过这个。我看到this solution，但不是我需要的。我需要一个展开和关闭，以及所有div需要开始相同的高度然后一旦点击展开，特定的div需要扩展。每个都可以彼此独立开放。

有什么想法吗？

Answer 1

如果您的HTML结构如下：

<div class='expandable'>
    <p>Some content</p>
</div>
<div class='expandable'>
    <p>Some more content</p>
</div>

你可以使用一些联合jQuery和CSS来实现这一点。

首先，此CSS会强制每个.expandable的最小高度为50px：

.expandable { min-height:50px; }

然后，为了处理扩展/折叠，您可以执行以下操作：

jQuery(function($) {

    $('.expandable').bind('click', function () {
        $(this).children().toggle();
    });

});

这会在每次点击时隐藏/显示.expandable DIV的内容。当内容被隐藏时，上面的CSS会阻止DIV自身折叠小于50px。

当内容也显示时，这将允许您的.expandable“扩展”到内容的真实高度。请注意，内容必须在HTML DOM元素中才能实现（可预测）。

<!-- This should work -->
<div class='expandable'>
    <p>foo</p>
</div>

<!-- This probably won't -->
<div class='expandable'>
    bar
</div>

Answer 2

css课程：

.toggledivs {height:50px;}
.max {height:150px;}

然后切换类

$('.toggledivs').click(function(){
  $(this).toggleClass('max');
});

在这种情况下，他们都是彼此独立的。初始HTML应该设置为

<div class="toggledivs">foo</div><div class="toggledivs">foo</div>

如果您想要第一个容器（或任何一个容器），请将元素'max'添加到元素lika：

<div class="toggledivs max">foo</div><div class="toggledivs">foo</div>