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 回答