0

私はWordpressの下で単一ページのポートフォリオを作成しています。各ギャラリーのサムネイルはリストアイテムです。
アイテムをクリックすると、スライドドロワー（#DrawerContainer）が読み込まれ、ajaxを使用して投稿からコンテンツがプルされます。

クリックしたアイテムの後にこの引き出しを行に表示したい。流動的なレイアウトであるため、ブラウザに1、2、3、4、または5つのアイテムが連続して表示されているかどうかはわかりません。

すべてに引き出しを追加しようとしました<li>が、サムネイルをクリックするとスライダーが開き、他のサムネイルが次の行にジャンプするのではないかと心配しています。

したがって、レイアウトの問題を防ぐ最善の方法は、改行の後でのみドロワーを呼び出すことだと思いました。

行の最後のliアイテムをターゲットにして、この行の改行の後にdivをロードするにはどうすればよいですか？

よくわからない場合は、レンダリングされた

編集を表示したいコードを次に示します。手に入れたい場合は、コードをjsfiddleに追加しました。http://jsfiddle.net/F6MvZ/10/

<ul id="portfolio-list">
    <li><a href="" class="ProjectWrap">item1</a></li>
    <li><a href="" class="ProjectWrap">item2</a></li>
    <li><a href="" class="ProjectWrap">item3</a></li> //end of first row (br/)

    <li><a href="" class="ProjectWrap">item4</a></li> //if I click this item
    <li><a href="" class="ProjectWrap">item5</a></li>
    <li><a href="" class="ProjectWrap">item6</a></li> //end of second row (br/)

        <div id="DrawerContainer"></div> // the content of item4 appears here

    <li><a href="" class="ProjectWrap">item7</a></li> //end of third row
</ul>

これが私が苦労しているコードです

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop").click(function(){
        var post_link = $(this).attr("href");
        //$('#DrawerContainer').slideToggle(500);
        $("#DrawerContainer").html("loading...");
        $("#DrawerContainer").load(post_link + " #container > * ");
    return false;
    });

        //Here is the part I'm stuck with now

    $(#portfolio-list).click(function(){
        $("<br/>").append('<section id="DrawerContainer"></section>');
    });

        //I assume the #DrawerContainer will generate a br/

});
4

1 に答える 1

0

このようなものをお探しですか？

http://jsfiddle.net/RF6df/1/

それは私が最初に書いたものの拡張です。お役に立てれば。

于 2012-10-12T16:22:39.057 に答える