0

画像ギャラリーを作成しており、クリック時にメニューを展開する各要素に追加したいと考えています。

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/

アニメーションとレイアウト自体を修正する方法はありますか。

4

1 に答える 1

0

いくつかの小さな変更を行い、同時に開くことができるバーは 1 つだけであることも追加しました

.remove()

ここでチェックしてくださいhttp://jsfiddle.net/VmrEG/3/

ここでは行の新しいフィドルです。好きなだけ要素を連続して追加できます

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

于 2013-05-08T17:57:27.783 に答える