【发布时间】：2012-10-13 00:22:39
【问题描述】：
我正在 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/
});
【问题讨论】：
-
考虑使用
jsfiddle.com，它会让用户更容易帮助你。 -
无论如何
.append(...)不会这样做.. 改用.after(...)。 -
我认为 Ofir 的意思是 jsfiddle.net
-
哇，谢谢，我不再孤单了！ :) 我设法将所有东西放在 jsfiddle 中，但现在我无法加载 ajax 来测试它。我不熟悉 jsfiddle 也许一个
足以测试抽屉。无论如何这里是地址：jsfiddle.net/F6MvZ/10
-
将 DIV 放入 UL 中并不是一件好事（即有效），并且可能会给您带来问题。您可以在 DIV 之前关闭 UL，然后重新打开另一个 UL，或者根据需要将 UL/LI 对替换为 DIV/DIV 和样式。