最近很忙，所以也就没时间博了，连好友的 Twitter 都鲜有 @，Google Reader 都有3000+ 的未读了，实在是罪过罪过。今早上班，瞅着博客突然想到以前用 Bo-Blog 以及 PjBlog 的时候，发现他们都是有关闭/显示侧边栏的功能的，那时候 jQuery 还不流行。于是我想，给自己现在的 Blog 加上这么个功能那将是比较酷的，除此之外，因为隐藏掉了侧边栏，主体内容区域就变大了，浏览文章特别是图片很多的摄影作品欣赏类的文章的时候，那将会带来不错的阅读快感，至少我是这么觉得的。当然，好东西要分享，那么大家请跟着我以下的描述来一起动手吧。
当然，前提还得是你的部落格载入了 jQuery 库，推荐你使用 Google Ajax Library 的 jQuery 调用地址。
首先在你的网页中你想要显示 关闭/显示侧边栏 的提示按钮或者文字，我这里就举个简单的例子，比如在你的 WordPress 模板中插入
<span class="show-close-sidebar">关闭/显示 侧边栏</span> |
接着就是 jQuery 功能代码部分了，请先看以下这段代码：
<script type="text/javascript" language="javascript"> $('.show-close-sidebar').toggle(function () { $('.sidebar').fadeOut("fast"); //让侧边栏快速渐隐掉 $('#content').animate({ width:"915px" //让正文主体部分宽度增加到915px },1000); //执行时间是1000毫秒 }, function () { $('#content').animate({ width:"700px" //让正文主体部分宽度收缩到700px },1000); //执行时间是1000毫秒 $('.sidebar').fadeIn(3000); //让侧边栏渐渐隐现回来，执行时间为5000毫秒 } ); </script> |
是吧，代码非常的简单，并且我做了代码格式化，大家看起来结构比较清晰点。然后我稍作讲解。
这里使用了 jQuery 中的 toggle() ，fadeIn() ，fadeOut() ，animate() 这四个函数，API参考文档可以看这个 jQuery API 参考文档在线中文版，也可以去 jQuery 官方文档看。
以上的功能代码用中文表述的意思就是当 class 为 show-close-sidebar 的元素被点击的时候，执行 toggle 函数，toggle 函数里面有两个 function ()，之所以有两个是因为要让那个被点击的元素点击第一次和第二次的时候执行不同的功能，不然你看如果把侧边栏给关了，不就无法恢复了么，您说是不是？在第一个 function () 函数里面，我先让 class 为 sidebar 的元素(就是我的侧边栏，你的侧边栏是什么 class 就替换成什么)渐隐掉，然后让 ID 为 #content 的运行 animate() 函数，animate()函数里面就是让那个 ID 为 #content 的元素宽度增加到 915px，也就是让你的正文区域扩大宽度，这不侧边栏不是被隐藏了么，当然要把正文区域增宽回来。1000 是执行的时间，单位是毫秒，你自行控制。下一个 function () 函数无非就是倒过来写，先执行让 #content 缩小然后再出现侧边栏，这样效果看起来比较自然，不然一开始侧边栏重新显示出来的时候被 #content 给遮挡了，然后#content再收缩回原来的宽度的时候，你就看不到侧边栏显示出来的那种效果了。
演示见本站顶部导航 Show/Close Sidebar。
我想这样的中文解释不知道是否给你们带来了更大的困惑，如果有不明白的就给我留言，我会一一解答。
当然，要想实现本站收缩的时候的那种抖动效果，你可以调用 Easing 插件。
jQuery 库真是个易用且庞大的 javascript 库，当然我这些都是皮毛技巧，总是想要实现什么效果了然后去 API 文档看看都有哪些效果然后再写代码，这样很不好，导致的后果就是有可能有更好的办法可以不用这么麻烦的功能函数而用一些简单的函数就能实现效果。所以我准备系统地去研究学习下 jQuery，毕竟我连 Javascript 也不会，总是这么折腾也不是个事儿，总得让自己专业点，你说是不是。
请大家继续关注本部落格，也可以 Follow 我的 Twitter，稍候我可能要放送 jQuery 的入门系列文章了，有兴趣地欢迎和我一起学习 jQuery。谢谢观赏！
昨天一个朋友还给我发来一个包说都是他收藏的js代码。。让我赶紧学会了就能用了。。
正好你开始讲了~我就搬个小板凳等教程咯~
😆
演示见本站顶部导航 Show/Close Sidebar。
我在找这个的时候沙发就被人抢了。可是我还是没找到=。=
@plidezus 哈，敬请期待~
@Sivan 呃，加错行了，加到了判断是否为管理员才能看到某个导航的下面行内容了，现在可以看到演示了吧~
我喜欢那切换的动画…
@Leeiio 看到了，好酷。而且这个跳动特效也很酷~
真牛比啊，哈哈，很炫很不错
jQuery 的效果确实很炫，看看是否适合用在我的博客上，感谢！
很好看呢，我也看看是否有用上的主意 💡
又加新玩意
@Yacca 效果越酷越能唬住人哈！
@Sivan @恬玮儿 恩，酷吧酷吧不是罪～
@welee 話說你的主題不是單欄的麼？
@Jinwen @yinheli 總是忍不住要折騰哈～
不错不错！！有点像切换 CSS 的意思！！
我一直想做这个效果来着，却一直没有空实践一下，哈哈，终于还是有人做了。我个人的话，更倾向于让main content部分居中，而不是变宽。因为，我觉得，一般人的阅读习惯应该不喜欢看很长很长的行。比如报纸，都是很短的行，我想那样应该读着更舒服。
@xiaorsz 用jQuery切换css么？
@Charles 内容居中了，中间一大块的两边是空出来的，不知道会不会有点怪。
恩，不错的哈。不过右面的文本框过长了。
好吧..不可否认,我对你有点小崇拜
这个效果有点意思哦~
这几天你的博在Chrome下网页打开都不完整，换上FF才登上来瞅瞅。。估计你这个水果族体会不到啊
呵呵
@Lorz 右面的文本框？
@Yuri 過獎了哈～
@Zoll 現在加了詳細的loading條，能幫我看看卡在哪兒麼？沒準是因為之前google ad失效了～
哇色，你的脚本不是一般的多呀，呵呵~
因为用FF打开没有问题，用Chrome又不好检查。。稍微说一下：
各个部分的背景图片都没有显示，字体排版的样式没有加载，侧边栏跑到了底下，左侧的go top和go bottom的图标横起来了到了最顶上。
这情况是从刚开始加载时就出现的，估计问题在代码的头部。。
@Zoll 難道google Chrome不支持css壓縮成php？我的blog下一部準備優化速度了呵呵，太多js了～
你的主题效果真多
Show/Close Sidebar 放的位置有点不太容易找哦
@任平生 把導航改成中文了，我想對於中文用戶更加親切了～
嘿，过渡动画真不错！
@aunsen 嘿，是挺不賴的～
享受阅读的快感……那过渡的效果是不错的~
@吖Bee 在IE下似乎有点卡，你觉得呢？推荐对比下firefox下的~
……firefox跟Chrome那效果好很多~~
你的博客已收录，来找找看吧！欢迎交换链接。面谱 http://www.mianpu1000.com
怎么用jQuery来来实现RSS订阅弹出这个效果~mg12那个跟jQuery有冲突，也很长……
我非常正式地严肃地在左边添上了我的名字，然后点了提交评论 =。=
啊，这Blog的设计太帅了…非常清新…非常好看～ 😳
@Donald 啊，您真是太客氣了，被您說得有點不知所措了。
这主题清新舒服。。
看来我的主题确实比较刺眼了…
真的很牛！！~~
啊，今天看起来就更舒服了，昨天整个版面是贴着左边的，嘿嘿…
我已经把你加到ADP的白名单了，嘿嘿…
这样有点卡
@nooidea 哈哈，謝謝～你的主題其實就是文字白色直接在紅色底上有點眨眼而已。
@Snow爱美丽 謝謝姑娘誇獎！
@Donald 今天做了深刻地檢討，從左傾變成了中立分子。
@雪深 其實是不卡地，我也不知道為什麼，在IE下地效果看來是卡卡的，你可以換Firefox或者Chrome或者Opera或者Safari看看哈～
不想折腾！
感觉这样挺累的。。
期待越来越多的作品，HOHO~~
相当不错的效果啊~
我之前也用jQuery写过一些效果，但是考虑到将来工作需要，还是硬头皮把Javascript啃下来吧（进行中）。毕竟很多js的运行机制跟思路还是需要打好基础的
@Leeiio 估计是IE6的毛病
@eddie 我也是準備啃Javascript，jQuery用起來是方便呵呵～
效果真炫！
还是居中的好啊
回来逛逛~~
@吖Bee 好久沒更新了～
牛啊！太炫了
評論框之尊姓郵箱網址等框框紛紛出界 望從速修正之
😯 你这里真好玩~！！ 令人嫉妒~~
LZ的Blog很华丽而简洁.貌似用了大量JS效果 – –
jQuery是个好东西,要是不用类库自己实现淡入淡出效果得累死
😎
@noir 只有Mac下的safari才有问题，十分古怪。
@Snow 呃…
@小野大神 jQuery确实挺易用的，十分方便。对你的繁简转换插件很有兴趣~
惊奇的看到很多MAC OS，呵。又，回复评论前边的那个“@”效果不错，又比较实在；其他的特效个人觉得有点花哨，喜好不同吧。
##############################
还是请教一个问题，像，返回类别后，鼠标在其上方悬停，在我的页面会显示“查看 category 下的全部文章”，你的略有不同，你是用的插件，还是把函数加入div标签？
哎呀呀。真好玩。
你的homepage就像是個小魔方
@smao 在類別管理那裡可以填上該類別的信息的，後台就可以設置～
@千葉 你用IE看這個效果不卡麼？
@Leeiio 不是啊，我留言中的一个函数好像被屏蔽掉了，是 the_category(‘, ‘) 显示出的是你文章标题，像你这篇文章的最前端的“Home > WordPress Plugins, jQuery > 关闭/显示你的 WordPress 侧边栏，享受阅读快感”，把你的鼠标移上去显示“查看 category 下的全部文章”不是侧边栏的那个，那是category_list 函数。可以修改嘛？
@smao 我不是用的category_list函數，我這裡的顯示是這樣的，你參考下。
<a href=”<?php echo get_option(‘home’); ?>” title=”返回首頁”>Home</a> > <?php the_category(‘, ‘) ?> > <?php the_title(); ?>
我现在觉得我看什么都卡 😯
@千葉 呃，IE不支持些东西，看本站的一些效果还是会怪怪的，不流畅~
Pingback: 升级版！Cookies 记录你的 Wordpress 侧边栏关闭/显示的状态 - Leeiio Chaos Made.
学习学习~~
@whisperer
指教指教~
孙文先生说过 不懂就要问.
怎么在模板中插入,我咋没效果呢?Easing 插件怎么调用。
请大哥详细指教一下.
3Q
@Accecc
呃，话说你看懂代码了么？
@Leeiio
晕。没有你的正文收缩的效果。只有侧边栏消失的效果。
能帮我看看是什么原因么?
开关按钮在文章旁边呢。
@Accecc
你好像撤下了？没有正文收缩是什么意思？那个我的代码里面注释写得好像挺清楚了的，你再仔细看下？
@Leeiio
现在我已经放上去了,你帮我看一下需要修改什么地方么.
不好意思~~
JS我是用的你的=。=
你直接都拿过去你会后悔的，因为很多用不到的代码会让你的博客速度变慢或者出现混乱的情况，推荐你仔细阅读本文，哪里看不懂再问~
@Leeiio
成功了,谢谢你!
还有些小细节 我会慢慢修改的. 🙄
Pingback: RSSA频道 » Blog Archive » 魔兽世界同人动画片《我叫MT》
不错!谢谢!
那段JS代码放在哪里挖？？
@一块冰儿
推荐放底部</body>之前，当然你放任何地方随意的。
内容是王道啊，是个好东西
Pingback: 侧边栏(开/关)测试…完美 | MOPVHS's Blog
你左边那个导航栏是怎么做的？
在ie6下面可以正常使用么？
关闭/显示 侧边栏 这段代码放在哪里？请教你一下！呵呵
不错。想请问一下，关闭/显示 侧边栏这段代码最好是加在哪里呢？
@eallion 网页代码最末尾</body>之前即可
功能是不错，就是写的太含蓄了，搞了半天效果出不来！
好复杂啊……
Pingback: test | 宅之小聚
请问如果我想打开一个页面默认情况下就是隐藏侧边栏，然后点一下开关后文章区域缩小，侧边栏弹出。这代码该怎么改呢？