您当前的位置: 首页 » JavaScript/JQuery编程 » 简单几步显示/隐藏文章内容
简单几步显示/隐藏文章内容
论坛链接
最近在几个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，教程写完了。如果需要实现这样的效果的话自己试试吧。有什么不明白的在下面发表评论。
我们可以利用这个函数来给标题和内容分别添加一个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，教程写完了。如果需要实现这样的效果的话自己试试吧。有什么不明白的在下面发表评论。