jquery - 浮动元素的绝对定位内容破坏了布局并导致动画崩溃

Question

我正在创建图片库，我想在点击时添加到每个元素扩展菜单。

我想重新创建 iTunes 11 专辑视图效果。

我使用 html 无序列表将图像作为网格

<ul>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    ...
    <li><div class="box"></div></li>
    <li class="clear"></li>
</ul>

然后使用 jQuery，我编写了一个函数，当我单击 li 元素时触发该函数，将其添加到另一个 div，然后向该 div 加载菜单。

$("li").click( function() {

    $(this).append("<div class='container'></div>");

    var cont = $(".container", $(this));

    cont.html("<div class='menu'><div class='content'></div></div>");

    var item_height = $(this).outerHeight();
    var cont_height = $(".content", cont).outerHeight();

    $(".content", cont).css({ height:0 });

    $(".content", cont).stop().animate({ height: cont_height + "px" });    

   $(this).css({height: (item_height+cont_height) + "px"});


} );

主要问题是当我单击 li 元素时，“iTunes 效果”不起作用 - 菜单出现但没有任何动画，更进一步，它破坏了整个布局。

演示：http: //jsfiddle.net/puz219/VmrEG/

有什么方法可以修复动画及其本身的布局。

Answer 1

做了一些小改动，还补充说只能同时打开一个酒吧

.remove()

在这里查看http://jsfiddle.net/VmrEG/3/

这里是行的新小提琴。您可以在一行中添加任意数量的元素

http://jsfiddle.net/VmrEG/6/