站长论坛

标题: 简单几步显示/隐藏文章内容 [打印本页]

作者: sunhw0725 时间: 2009-12-26 10:51
标题: 简单几步显示/隐藏文章内容
最近在几个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>
第二步：添加样式[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; }
样式添加完后就是写代码让它实现了。

第三步：写Javascript代码

jQuery(document).ready(function(){
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，教程写完了。如果需要实现这样的效果的话自己试试吧。有什么不明白的在下面发表评论。

欢迎光临站长论坛 (http://tzlink.com/bbs/)