为侧边栏Widgets增加折叠功能

2009/09/07 // Tags:, // 19 Comments » // 1,929 Views

最近在学 jQuery，准备拿自己的 blog 练手。首先做的就是为侧边栏 Widgets 增加折叠功能，这也是我写的第一个 jQuery 脚本。

如下图所示，点击 Widget 标题处添加一个〖折叠/展开〗链接，该 Widget 的内容就会动态的隐藏和显示。具体效果可以参见 LiGht’s BloG 的侧边栏。

演示：WordPress 侧边栏 Widgets 折叠

下面是一个如何在 WordPress 中实现这一效果的简单教程：

1.确保你的 blog 调用了 jQuery 库。在 header.php 中适当位置添加：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tweak.js"></script>

如果没有，点击下载最新的 jQuery 库，并上传到模版的 js 文件夹。然后在 header.php 中适当位置添加：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tweak.js"></script>

2.将下面的代码保存为 tweak.js 文件，并上传到模版的 js 文件夹。

需要说明的是，你还需要参照自己模版的结构，对代码进行一些修改。具体需要修改的是第 2 行、第 8 行和第 12 行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function() {
    var $subHead = $('li.widget > h3');
    $subHead.prepend('<a href="javascript:void(0);" style="float:right;color:#777;">[折叠]</a>');
    $('a',$subHead).click(function() {
	var text = $(this).text();
	if (text == '[折叠]') {
	    $(this).text('[展开]')
		 .parent().next()
		 .animate({height:'hide',opacity:'hide'},'slow');
	} else {
	   $(this).text('[折叠]')
		 .parent().next()
		 .animate({height:'show',opacity:'show'},'slow');
	};
    });
})
Related Posts with Thumbnails

19 Responses to “为侧边栏Widgets增加折叠功能”

  1. zwwooooo 说：
    2009/09/07于23:03
    Google Chrome 2.0.172.43Windows XP

    效果不错，我也折腾去

    回复
  2. bwskyer 说：
    2009/09/08于00:30
    Firefox 3.5.2Windows XP

    效果确实不错, 学得有模有样哦…

    回复
  3. 锐风 说：
    2009/09/08于15:28
    Opera 10.00Windows XP

    恩, 很有一丝.

    回复
  4. lxk 说：
    2009/09/13于08:54
    Internet Explorer 6.0;Windows XP

    很好

    回复
  5. lxk 说：
    2009/09/14于17:13
    Internet Explorer 8.0;Windows Vista

    主题很好了，两点建议：1是标题可否改进？2是头像我喜欢那个小人，或是俩个都用？

    回复
  6. chanthon 说：
    2009/09/14于21:32
    Internet Explorer 7.0Windows XP

    jQuery 搞出来的效果是很炫啊。

    回复
  7. zrqx008 说：
    2009/09/14于22:00
    Firefox 3.5.2Windows Vista

    这个功能还是比较养眼的

    回复
  8. K4.W 说：
    2009/10/07于17:49
    Internet Explorer 8.0;Windows Vista

    先不折腾了.
    我wp的themes.php貌似有问题
    一些插件 和 脚本都用不了- -!!!

    回复
  9. 怡红公子 说：
    2009/10/08于17:16
    Firefox 3.5.3Windows 7

    这个代码的位置不好控制呀，具体放在哪里才有用呢？我的是默认主题。

    回复
    • LiGht 说：
      2009/10/08于18:37
      Internet Explorer 8.0;Windows XP

      我应该已经讲明白了吧，一、两个外部文件，还有两行代码放在 header.php 适当位置（如果你不确定，放最底部好了）。另外，代码需要针对主题做一些修改。

      回复
  10. longdd 说：
    2009/10/11于15:02
    Shiretoko 3.5.2Windows 7

    做一个隐藏的更好！
    不需要那些“展开”“折叠”，直接点击边栏名字就好了。
    比如点击“关于我”就能折叠，而不是点击右边的“折叠”。

    回复
  11. 天晴 说：
    2009/11/12于18:46
    Firefox 3.0.5Windows XP

    请问怎样设置才能自动折叠? 我想要人按 “展开” 才会show出内容.

    回复
    • LiGht 说：
      2009/11/12于18:51
      Opera 10.00Windows 7

      在页面载入后，模拟点击“折叠”
      比如我的 blog 侧边栏友情链接自动折叠就是下面一行代码实现的：
      $(‘a’,'li.widget h3:contains(“Links”)’).click();

      回复
  12. 天晴 说：
    2009/11/12于19:12
    Firefox 3.0.5Windows XP

    行了~ ^^
    不过, 能把”Links” 这字改成图片的联结吗??

    回复
  13. 天晴 说：
    2009/11/13于10:45
    Firefox 3.0.5Windows XP

    例如: Section 1 是“折叠”状态, Section 2 是“展开”状态的, 我想要点撃了Section 1, 它就变成“展开”状态了, 而同时Section 2 就会自动“折叠”起来.

    总括来说, 我是要有一个Section才能展开, 其他的Section 就折叠.

    这种效果怎做??

    回复

Leave a Reply