jquery isotope resize 以处理扩展的手风琴答案

【问题标题】：jquery isotope resize to handle expanded accordionjquery isotope resize 以处理扩展的手风琴
【发布时间】：2013-05-20 02:07:07
【问题描述】：

我将 jquery isotope 用于联邦监管活动的可排序文本列表。我们在一个案卷中列出每个更新，每个案卷的列表可能会变得很长。我已将 Bootstrap 简单手风琴面板添加到具有两个以上更新的项目中，以使每个项目面板的高度相当一致。当我打开手风琴面板时，同位素面板不会调整大小以适应展开的手风琴。

关于如何让同位素面板调整高度以处理展开的手风琴的任何想法？

谢谢！

【问题讨论】：

标签： jquery accordion

【解决方案1】：

要修复它，您需要在所有项目都具有适当大小后进行初始化或布局。只需添加此代码：

$('.panel').on('shown.bs.collapse', function (e) {
    $grid.isotope('layout');
})

【讨论】：

如丝般顺滑 :)

【解决方案2】：

对于简单列表布局，有一个同位素选项。

javascirpt：

$('.container').isotope({layoutMode: 'straightDown'})

在您的 css 添加修复以覆盖插件执行中的动态内联样式后：

.isotope .isotope-item {
    min-height: 0px !important;
    position: static !important;
    transform: translate3d(0px, 0px, 0px) !important;
}
.isotope-hidden{
    display: none;
}

希望对你有所帮助。

【讨论】：

【解决方案3】：

你必须在回调中为同位素“reLayout”添加一个函数。

function() {$('#container').isotope('reLayout');}

放置位置的示例：

$(this).next().slideDown(
    function() {$container.isotope('reLayout');}
);

【讨论】：