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/

Floated元素的绝对定位内容打破了布局并使动画崩溃

1 个答案: