<div id="post-<?php the_ID(); ?>" class="post-home">
 
	<div class="post-title"><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2></div>
 
	<div class="post-content"><?php the_content(__('继续阅读 &gt;')); ?></div>
 
	<div class="post-messages"></div>
 
</div>
 
/* 这是我的index.php里的部分代码，注意结构！ */
 
#postlist .post-content{display:none} /* 让id="postlist"下的class="post-content"隐藏，注意修改！ */

 
$('.post-title').toggle(function(){ //点击class="post-title"的元素时，交替执行以下动作
 
	$(this).next().slideDown(300); //动作一，让其下一个元素（即.post-content）以300毫秒速度滑下
 
	},function(){
 
	$(this).children("h2").children("a").text('页面载入中……'); //动作二，让其子元素（即.post-title h2 a）的文字改为“页面载入中……”
 
	window.location = $(this).children("h2").children("a").attr('href');  //然后取得其子元素内的href属性并打开；
 
});
 
$(".post-title:first").click(); //模拟用户点击第一个.post-title的元素（即首篇文章）

OK，完成后的效果是啥呢？

home01.jpg home02.jpg

打开首页：文章列表只有标题，然后首篇文章内容展开（模拟用户点击一下，而当用户真正自己第一次点击首篇文章标题时，直接进入文章页，因为此时触发的“动作二”）；

点击标题：（对访客来说除首篇文章）第一次点击其对应内容展开，第二次点击进入文章页。

文字描述总是说不太清的，还不如请各位童鞋直接访问小博的首页点着试试吧！