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; 
});

替代jquery Masonry有很多列表项

1 个答案: