jquery - 具有许多列表项的 jquery Masonry 的替代品

Question

我有一个很大的无序列表，每个都包含一张图片和一个标题。单击标题时，会显示一个内容区域。默认情况下，所有内容区域都是折叠的，因此每个列表项具有相同的高度。您可以在此处查看工作示例：http: //trendsprintmedia.com/templates/

Jquery 很简单：

$(".tempContainer").hide();
$("h2.trigger").click(function(){
    $(this).toggleClass("activeTemp").next().slideToggle(250);
return false; 
});

当您展开内容时（通过单击标题或加号图标），您将看到所有内容向下滑动。这搞砸了它下面的所有列表项。它下面的整个列表变得杂乱无章，而且……嗯，丑陋。我想避免这种情况。

因为每个元素 ( li.singleTemp) 的宽度相同，所以我正在寻找一个 jquery 解决方案，当单击标题时，列表项的垂直列向下滑动，其余元素保持原位。有任何想法吗？

或者，如果您展开一个列表，如果下一行完全向下滑动，那就太好了。

Answer 1

我会给你<div id="templates">一个绝对的位置，并将 z-index 设置为高于其余元素。

$("h2.trigger").click(function(){
           $(this).toggleClass("activeTemp").next().slideToggle(250)
              .parent('div#templates')
              .css({position: 'absolute', z-index: '3', top: '155'});
    return false; 
});