Jquery 展开一个LI项并对其余项重新排序

我试图在jQuery中实现以下效果：

说明。

我有一个列表，每个列表都有缩略图。单击缩略图时，我正在设置该LI的宽度的动画，以包含一个大图像（例如，从300px到972px；类似于jQuery Popeye插件效果）

每个LI的固定宽度为300px，并通过jQuery中的第n个子项追加一个“nomarginright”（行中的第3项必须具有该类）

问题。

如果单击一行中的第一个LI，它将展开而不超出其容器。但如果我单击第二个，它将扩展到其容器之外，并将第一个LI保留在第一行，而第三个LI保留在另一行，并附加了“nomarginright”类（因此在第三个和第四个LI之间没有空间）

单击缩略图后，如何展开行中的li并重新排列非活动li项目（也重置“nomarginright”效果）

理想的解决方案是：在该行中，将活动LI移动到任何非活动LI之前，并重置nomarginright

    $('#portfolio ul li div.picture a').each(function() {

    $(this).click(function() {
        $(this).parent().animate({
            width: 972,
            height: 504
        }, 2000);

        $(this).parents('li').addClass('active').animate({
            width: 972
        }, 2000);

        return false;
    });

HTML:

---

上面的内容在UL中重复了一遍。

根据您的描述，我得出了如下结论：

让我知道！；）

PS：刚刚注意到缩略图堆积，由于我的分辨率，我忽略了这个错误。使用CSS应该可以提供所需的解决方案

---

PPS：修复了CSS布局问题。它可以简化一点，但这应该让你开始。希望我没有在这里找错方向。

编辑我通过绝对定位

a

标签，提出了自己的解决方案；不需要克隆。要做到这一点，只需在

li

上设置一个宽度，然后就可以在其边界之外调整a的大小

旧方法

我通过简单地克隆

a

标记并将其附加到具有绝对定位的同一

li

上，实现了我认为您想要的结果。然后我将为克隆设置动画；）

---

.

你能在jsFiddle.net上提供一个例子吗？好主意，但我似乎无法在其中制作动画。你能再解释一下你想要达到的目标吗？是不是，你想在顶部放一张展开的图片，然后再放一张非展开的图片？是的。我最好将我的活动LI移动到我行的顶部，并将其余的留在后面。尝试使用类似的：。但是这些图像不是绝对定位的，而是一个UL的静态图像。在我的容器中，每行有3个图像。首先要解决的问题是：在

animate

中，width/height元素是css属性，因此它们需要单位（例如

width:'972px'

）；当然，这不会解决您的问题，但也需要注意。当然，这不会处理双击或任何其他意外情况；你可能想考虑一下你。经过一些修改，我已经能够根据你的想法提出解决方案。

<li>
<div class="picture">
<a href="includes/pictures/portfolio-client-2.png" title="#"><img src="includes/pictures/portfolio-client-1.png" alt="#" /></a>
</div><!-- end .picture -->
</li>