由于您需要最佳实践、方法和建议，因此我对您应该如何进行的看法如下：

首先，divide the content of your page in two ideal spaces, 帖子列表和内容。类似这样：

<nav class="post-navigation">
    <ul>
        <li>
            <h2>{Post title}</h2>
            <p>{Excerpt} [&hellip;]</p>
            <p><a href="{post-permalink}">Read more &rarr;</a></p>
        </li>
    </ul>
</nav>
<section class="post-content"></section>

考虑在空间中列出帖子a<ul> 内部a<nav> 元素，尽可能具有语义。

要隐藏.post-content 节，不使用display:none. 当您希望使用滑动效果设置动画时，position it outside of the screen. 已经给它width: 70% 这是你的目标bind a function to the click event 使用jQuery，如下所示：

$(\'nav.post-navigation li a\').click(function(e){
    // Function body
});

将内容按animating the position 您的.post-content and the width 您的nav. The jQuery documentation 应该很清楚这一点。请记住，您希望拦截锚点的正常行为，因此preventDefault() 或return false, 或者两者兼而有之

Get your post content using an AJAX request. 您可以使用href 属性，您可以将其放在readmore链接中以获取正确的内容。你离开的原因href 就是要有一个优雅的回退：如果代码出了问题，如果用户禁用了javascript，或者只是在不支持javascript的浏览器上导航，他仍然可以访问您的内容。此外，想想“dem蜘蛛！”！检查是否成功并将您的内容添加到div.post-content. 例如，您可以使用append() 方法

您可能需要添加更多的细节，并对现有内容进行优化。首先，我可以提出以下建议：

1. Make your website look more responsive 通过谨慎使用荷载.gifs

2. Don\'t double serve content: 检查用户是否正在单击当前显示页面的链接，并且不再获取内容；除了在用户看来很傻之外，它还会造成无用的服务器负载（可能无关紧要，但仍然如此）。不过，请始终考虑您的用户！告诉他，通过巧妙地使用UI，该链接已被禁用。

3. Manipulate browser history: 使用history API. 你的网站将更容易访问，更人性化，更SEO友好，看起来更先进。