最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们只要有两个ID就行了，ID1点击就打开或关闭ID2，在这里，ID1放在标题前，ID2当然就是文章的内容了。我们知道，WordPress的每篇文章都会通过”the_ID()“自动生成一个ID。
我们可以利用这个函数来给标题和内容分别添加一个ID。然后通过JQ来控制它们就OK了。下面讲讲步骤：
第一步：添加两个ID
我们打开首页，找到标题的代码，如下所示：
<h2><a href="<?php the_permalink() ?>" rel="bookmark" type="scrollover" title="点击查看—><?php the_title(); ?>" ><?php the_title(); ?></a></h2>
我们把下面的SPAN添加到h2的里面：
<span id="post-<?php the_ID(); ?>" class="openentry" title="点击关闭/打开文章内容."></span>
接着给entry添加一个ID：
<div class="entry" id="entry-<?php the_ID(); ?>">
<p><?php the_content(); ?></p>
<p><?php comments_popup_link('已有 0 条评论 »', '已有 1 条评论 »', '已有 % 条评论 »'); ?></p>
</div>
<p><?php the_content(); ?></p>
<p><?php comments_popup_link('已有 0 条评论 »', '已有 1 条评论 »', '已有 % 条评论 »'); ?></p>
</div>
第二步：添加样式[CSS]
我们需要两个样式，分别是默认时的和点击后的，样式如下面这样：
/*Open or Close Entry*/
.openentry {float: left; display: block; width: 16px; height:16px; margin: 4px 2px 0 0; background: url(images/max_bar.gif) -32px -16px no-repeat; }
.closeentry { background: url(images/max_bar.gif) -32px 0px no-repeat; }
.openentry {float: left; display: block; width: 16px; height:16px; margin: 4px 2px 0 0; background: url(images/max_bar.gif) -32px -16px no-repeat; }
.closeentry { background: url(images/max_bar.gif) -32px 0px no-repeat; }
样式添加完后就是写代码让它实现了。
第三步：写Javascript代码
jQuery(document).ready(function(){
jQuery("#post-<?php the_ID(); ?>").click(function(){jQuery("#entry-<?php the_ID(); ?>").slideToggle();jQuery(this).toggleClass("closeentry");});
});
jQuery("#post-<?php the_ID(); ?>").click(function(){jQuery("#entry-<?php the_ID(); ?>").slideToggle();jQuery(this).toggleClass("closeentry");});
});
代码很简单，核心代码只是两句而已。简单说下它的意思。当#post-the_ID()点击后打开或关闭#entry-the_ID()这个ID，并同时给自己添加或删除closeentry的样式。closeentry的样式就是改变了一下背景图而已。OK，教程写完了。如果需要实现这样的效果的话自己试试吧。有什么不明白的在下面发表评论。
2008/12/05
我的用用看看 哈哈
2008/12/05
首页那个半透明的东东不错哦。能不能出个教程呀。
2008/11/30
这个功能不错~！
2008/11/30
嗯，我的站也已經用上了。
2008/11/29
效果还不错 我想到了用在哪里…搜索某个tag时的结果页…
2008/11/29
偶在这评论上花了太多时间整了。现在看起来还是不怎么爽啊。囧！
2008/11/29
感觉2.7的这个嵌套回复有点诡异，显得有点乱！！
2008/11/29
对速度的影响应该不是很大，就是两句代码。
2008/11/29
沙发。又是一个强悍的功能。不过个人觉得用处不是很大，一定程度上还是会影响速度吧。
2008/11/29
效果很棒，我一开始还真没看到，清了下缓存才看到了！！在有些博客的留言地方看到过这种效果 ！！不过感觉我现在的皮不太适合搞这种效果！！忧伤！
2008/11/29
晕菜，你抢了我的沙发。。。只能坐个大腿了。。。。