具有许多列表项的 jquery Masonry 替代方案

发布于 2024-11-29 22:04:01 字数 641 浏览 0 评论 0原文

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

Jquery 很简单

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

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

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

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

原文

I have a large unordered list, each containing a picture and a title. When the title is clicked, a content area reveals itself. By default, all of the content areas are collapsed, so each list item has the same height. You can view a working example here: http://trendsprintmedia.com/templates/

The Jquery is simple:

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

When you expand the content (by clicking on the title or plus icon), you will see all of the content slide down. This screws up all of the list items below it. The entire list below it becomes unorganized, and..well, ugly. I want to avoid this.

Because each element (li.singleTemp) is the same width, I am looking for a jquery solution that when the title is clicked, just that vertical column of list items slide down, and the rest of the elements stay in place. Any ideas?

Alternatively, if you expand a list, it would be great if the next row would slide down entirely.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清旖 2024-12-06 22:04:01

我会给你的

一个绝对位置，并将 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; 
});

i would give your <div id="templates"> a position of absolute and set the z-index higher than the rest of the elements.

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

回复收藏 0 原文

~没有更多了~