Question

我正在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/

});

Answer 1

寻找这样的东西？

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

它是我最初写作的延伸。希望这会有所帮助。

如何在点击事件换行后加载div？

1 个答案: