“关闭/显示侧边栏”完美终结版

之前文章《”关闭/显示侧边栏”最简代码版》，先来看看其中的jQuery代码：

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

 
$('#close-sidebar a').toggle(function(){
 
	$(this).text("显示侧边栏");
 
	$('#sidebar').hide();
 
	$('#content').animate({width: "960px"}, 1000);
 
	},function(){
 
	$(this).text("关闭侧边栏");
 
	$('#sidebar').show();
 
	$('#content').animate({width: "705px"}, 800);
 
});

这段代码有个小小不完美的地方的，其实也有多个留心的童鞋发现并向我反馈过：

当点击“显示侧边栏”时，浏览器右侧的滚动条“急剧变化”，若侧边栏比较长更是明显……

其实当点击“显示”，侧边栏立即就显示出来了，只是主体的宽度还未缩回，它就被压在主体下面，页面的高度也随之增加，0.8s后才得以跳上来。

这与我们之前写代码的期望有点出入：点击“关闭”，侧边栏消失，主体宽度伸长；点击“显示”，主体宽度缩回，侧边栏显现。

处理这个小问题，首先想到的是用jQuery的fadeIn/fadeOut，轻松解决，可杯具的是经过这个淡入淡出后的字体，在IE下会变得惨不忍睹，尤其是雅黑。怎么办呢？

再次看《jQuery1.4中文文档》，发现新增了一个函数，可将队列中的函数延时执行：

.delay()

用这个函数也轻松解决，调整后的jQuery代码：

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

 
$('#close-sidebar a').toggle(function(){
 
	$(this).text("显示侧边栏");
 
	$('#sidebar').hide();
 
	$('#content').animate({width: "960px"}, 1000);
 
	},function(){
 
	$(this).text("关闭侧边栏");
 
	$('#sidebar').delay(800).show(0);
 
	$('#content').animate({width: "705px"}, 800);
 
});

可，用最新版1.4的童鞋并不多，还是通过网络搜索学习，原来早有另外一种书写格式可实现这个函数的功能，经过尝试，当当当当，完美版出现：

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

 
$('#close-sidebar a').toggle(function(){
 
	$(this).text("显示侧边栏");
 
	$('#sidebar').hide();
 
	$('#content').animate({width: "960px"}, 1000);
 
	},function(){
 
	$(this).text("关闭侧边栏");
 
	$('#content').animate({width: "705px"}, 800, function(){$('#sidebar').show();});
 
});

把原7、8两行代码合并，即实现了主体宽度缩回后，侧边栏再显示！

OK，到此本文的任务已经完成，下面分享我使用“关闭/显示侧边栏”的jQuery代码：

 
$('#close-sidebar a').toggle(function(){
 
	$(this).text("显示侧边栏")
 
	$('#sidebar').hide().prev().animate({width: "960px"}, 1000);
 
	},function(){
 
	$(this).text("关闭侧边栏")
 
	$('#sidebar').delay(800).show(0).prev().animate({width: "705px"}, 800);
 
});

如果你的主题侧边栏和主体的HTML结构是同级的，并且调用的是jQuery1.4版，就可以使用上述代码啦~

主机格调
  1. 华斐
    五月 8, 2010 16:58:16 #1

    顶！！效果杠杠的

    回复
      • 华斐
        五月 8, 2010 17:07:17

        刚好刷新推特…..看到了就来看看效果

        回复

        • 原来华斐也来这里了，呵呵，今天看了好几个jq的代码，不知道怎么用。诶，惭愧。

          回复
  2. 起衣
    五月 8, 2010 17:06:17 #2

    一时没注意，就没沙发了

    回复

    • 哈哈，都是挂着推的人哟~

      回复
      • 起衣
        五月 8, 2010 17:14:17

        其实刚从教室学习归来呢 :evil:
        发现我那 kill sidebar 的功能没地方放…冏…

        回复

        • 放顶部的导航里咯~周末还学习，恩，好孩子！

          回复
  3. hzlzh
    五月 8, 2010 17:24:17 #3

    没杀到发，没事，照样顶起

    回复
  4. 阿邙
    五月 8, 2010 17:48:17 #4

    忙坐下围观..
    copying.

    回复
  5. tron
    五月 8, 2010 18:44:18 #5

    :shock: mark下，暂时觉得没有侧边栏比较清爽了

    回复

    • 单栏的主题也是很有魅力地~

      回复

  6. 貌似木木一个礼拜更新一次了。而且都是待技术的 :grin:

    回复

    • 平日人都呆在小学里，而且没有网……拿手机看书。

      回复
  7. TTkea
    五月 8, 2010 19:22:19 #7

    哇,沙发这么快就没了,顶博主,厉害~!!

    回复
  8. LOO2K
    五月 8, 2010 20:54:20 #8

    淡入淡出后的字体，在IE下会变得惨不忍睹；这个bug可以通过给字体设置背景颜色实现，尽管不是非常完美。
    其实我有个小建议，哈哈：
    记住Cookies，如果是关闭侧栏的话，之后在整个WordPress中都不加载 #sidebar，在没有加载 #sidebar 的时候点击了打开侧边栏，则用 Ajax 把 sidebar 加载进来。不知道你觉得如何？
    其实我有点感觉 #content 的 animated 的时间有点长了。。。

    回复

    • 那是因为 IE 下的透明度是应用 filter 实现的，而 filter 和 Windows 的 ClearType 字体渲染冲突…动画结束以后可以把文字的 inline CSS 用 JS 去掉，这样是可以恢复平滑渲染的。而动画过程中加大锯齿是不能避免的。

      回复

      • 原来是这么回事呀，网上曾经搜索，都弄不明白呢！现在清楚了，多谢多谢~

        回复

        • 对微软很无语啊，filter 和 ClearType 都是他自家的东西，居然冲突…

          回复

    • 恩，记下，Cookies还不知道怎么用呢，现成文章里太过复杂，作罢中呢！
      感谢提醒~~

      回复

  9. 依然折腾，我折腾不起来了 :!:

    回复

    • 萎了？HOHO，帅哥也虚咯！

      回复

    • 恩，我用jQuery还是因为AJAX评论提交~

      回复
  11. 小闇
    五月 9, 2010 00:02:0 #11

    晚來了啦啊啊啊啊啊 :cry: 華麗麗的SOFA…..

    回复

    • 额，主要米有小闇的IM，有的话下次给你内部消息~HOHO

      回复
      • 小闇
        五月 9, 2010 13:58:13

        弱弱地問一下IM是不是騰訊微博……之類的 :?:

        回复

        • 即时通讯类~QQ，MSN，杂七杂八微博呀

          回复
          • 小闇
            五月 9, 2010 16:32:16

            只有twitter, plurk和MSN…..(畫圈圈

            回复

            • 推特是抢SF的利器哟~@林木木

              回复
  13. 万戈
    五月 9, 2010 09:05:9 #13

    你居然已经用上1.4了，我还在1.2X呢 :mrgreen:

    回复

    • 反正不差那么几KB，主要是看到说1.4优化了很多函数的性能~

      回复
  14. cooved
    五月 9, 2010 12:37:12 #14

    早就注意MUMU的侧边栏的文章了，一直没时间下手，现在都是终结版了，我也照抄一个 :grin:

    回复
  15. 麦叔
    五月 9, 2010 13:05:13 #15

    效果挺好看的，但是不知道有多少访问者喜欢关闭sidebar，如果没有太多访问者使用的话，就没必要使用了。

    回复

    • 一般就在阅读长篇文章时还会用到，另外没做Cookies记录，耍酷大于实用……

      回复
  16. oumu
    五月 9, 2010 13:07:13 #16

    :wink: 赞啊～修改去咯～

    回复
  17. 羽中
    五月 9, 2010 13:54:13 #17

    挺好玩的，不过我那个模版不行 – =

    回复

    • 哈哈，还差一个Cookies记录功能，不过还没理清代码，暂时就搁着~

      回复
  19. A.shun
    五月 9, 2010 16:35:16 #19

    有个性的小功能

    回复

  20. :grin: 原来如此~~马上回去改~~~

    回复
  21. soping
    五月 11, 2010 00:03:0 #21

    :sad: 看不懂，纯粹让代码耳濡目染一下，代码盲于午夜低调路过 :cool:

    回复

  22. :arrow: 我是要一直跟你后面了，慢慢的，慢慢的，我要把你的主题给克隆了 :mrgreen:

    回复
  23. 郑永
    五月 12, 2010 21:40:21 #23

    不愧是折腾丸子，收藏了，呵呵，不过我现在都不敢动代码啊。

    回复

    • 有啥不敢的，备份就好了嘛！

      回复
  24. Tr.
    五月 20, 2010 16:06:16 #24

    收下新代码~感谢~我的侧边栏太长，缩得慢些会很恶心，研究一下再改改主题

    回复

    • 呵呵……改下收缩的速度咯~

      回复

  25. 过来顶一下，虽然我是真的看不懂 :evil:

    回复

    • 呵呵，不懂也无所谓撒，想加招呼一声，马上帮你搞定~

      回复
  26. 小松
    六月 13, 2010 14:56:14 #26

    这里竟然还有perfect版本，哈哈~搬过来用之~

    回复

    • 代码上我能力范围内最优了~嘻嘻

      回复
  27. 龟仙人
    六月 26, 2010 16:14:16 #27

    为什么边栏消失后，右边的线缩回来了，但主题部分还是在原地不会移到中间啊

    回复

    • 明白问题所在那就好办了，不妨看看jQuery代码吧～读一读

      回复
  28. 丕子
    七月 1, 2010 16:58:16 #28

    我的inove主题一直不行 不知为啥

    回复

    • 不是回复过你了嘛，ID和class要对应！看代码注释和文章内容撒！

      回复
      • 丕子
        七月 1, 2010 21:20:21

        我知道啊 我的div都是用id表示的 当然用$去元素就行了 但是不知为何 哎

        回复
  29. snowxh
    七月 21, 2010 16:12:16 #29

    举手 为什么我点过之后文字不变成 显示侧边栏而是乱码呢

    回复

    • 请把另存为UTF-8格式的～

      回复
      • snowxh
        七月 21, 2010 17:04:17

        啊啊 真的耶！
        kiss&thx

        回复

        • 呵呵，哦哦，我晕了……

          回复
  30. 箴言
    七月 31, 2010 20:50:20 #30

    貌似有点复杂，唉···

    回复

    • 思路要清晰，不然就纯找折腾……

      回复

  31. 怎么用了也不见效？变成文字不能点击使用了- -

    另外google也提供了外链地址了：http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

    回复
  32. 流年
    八月 7, 2010 17:21:17 #32

    嘿嘿，现在看不到那个效果

    回复
  33. mice
    八月 18, 2010 23:13:23 #33

    我是来穿越的.. :cool:

    回复
  34. 箴言
    九月 6, 2010 22:38:22 #34

    木木的字体什么什么字体？

    回复
  35. 箴言
    九月 6, 2010 22:39:22 #35

    其他博客放什么位置？

    回复
  36. 青衿
    十月 14, 2011 03:12:3 #36

    求教，如何默认是隐藏侧边栏的？

    回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*


您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">