Question

我左边有一个菜单，显示了帖子标题列表：

<ul id="post-title-list">
    <li><a href="url" class="post-link">Post title 01</a></li>
    <li><a href="url" class="post-link">Post title 02</a></li>
    <li><a href="url" class="post-link">Post title 03</a></li>
    ...
</ul>

在右侧，我有一个空div为内容：

<div class="single-post-container"></div>

内容加载了Ajax：

 $.ajaxSetup({cache:false});
 $(".post-link").click(function(){
     var post_link = $(this).attr("href");
     $(".single-post-container").load(post_link);
 return false;
 });

这工作顺利，但点击链接会将之前的内容替换为新内容。相反，我想在已经存在的内容之上添加它。

这应该是结果：

<div class="single-post-container">Last clicked menu item</div>
...
<div class="single-post-container">Third clicked menu item</div>
<div class="single-post-container">Second clicked menu item</div>
<div class="single-post-container">First clicked menu item</div>

并且，当再次在菜单中单击时，内容应该消失。

我必须在哪里寻找这项工作？我已经尝试用Metafizzy Isotope得到这个结果，但我认为这是错误的做法。我想我只需要为下次点击准备该div。

任何帮助？

Answer 1

您应该使用JQuery的.prepend()，而不是load()：

 $.ajaxSetup({cache:false});
 $(".post-link").click(function(){
     var post_link = $(this).attr("href");
     $(".wrapper").prepend(post_link);
     return false;
 });

此外，您应将single-post-container包装在div上，如下所示：

<div class='wrapper'>
    <div class='single-post-container'></div>
    ...
</div>

使用Ajax预备并关闭帖子（在WordPress中）

1 个答案: