“关闭/显示侧边栏”最简代码版

之前分享过《JQuery 学习笔记之:关闭/显示 WordPress侧边栏》,引燃了很多童鞋的折腾劲,不过代码稍微长了点。这次再次翻开《锋利的jQuery》这本书,突然想到新的代码:

 
<li id="close-sidebar"><a>干掉侧边栏</a></li> /* 可加在导航ul标签中 */
 
$('#close-sidebar a').toggle(function(){ //选中id="close-sidebar"内的a标签的内容,即“干掉侧边栏”
 
	$(this).text("显示侧边栏"); //点击此中内容后改变成“显示侧边栏”
 
	$('#sidebar').hide(); //隐藏id="sidebar"的内容,即“侧边栏”
 
	$('#content').animate({width: "960px"}, 1000); //让id="content",即主体部分的宽度伸长至960px,时间为1000毫秒
 
	},function(){
 
	$(this).text("关闭侧边栏"); //点击此中内容后改变成“关闭侧边栏”
 
	$('#sidebar').show(); //显示id="sidebar"的内容,即“侧边栏”
 
	$('#content').animate({width: "705px"}, 800); //让id="content",即主体部分的宽度缩至705px,时间为800毫秒
 
});

相比之前,代码逻辑更为清晰简洁!特此分享~

2010-5-8更新:《”关闭/显示侧边栏”完美终结版》

主机格调
  1. 蓝冰
    十二月 6, 2009 22:06:22 #1

    沙发。。。。

    • 蓝冰也成沙发专业户了?HOHO

      • 蓝冰
        十二月 7, 2009 13:23:13

        我戳,你早干啥去了。

  2. kangzj
    十二月 7, 2009 00:11:0 #2

    板凳~JQuery真乃神器

    • 最终还是说明JS是强大的!

  3. 小y
    十二月 7, 2009 01:00:1 #3

    …依旧无法使用。。 :cry:

    • 我这,还是你测试的?

      • 小y
        十二月 7, 2009 12:46:12

        我测试的。。你这里没问题。。

  4. winy
    十二月 7, 2009 02:57:2 #4

    CP党飘过,找了一个根据cookie保存侧边栏显隐代码,好像更复杂一点
    另外,问一下你贴的代码外面 有个框是怎么弄出来的?

    • Dianso
      十二月 7, 2009 12:18:12

      你看看他的wp_syntax的CSS文件

    • css哦,我写在主题style.css里了~

  5. 万戈
    十二月 7, 2009 09:26:9 #5

    我还没研究到这一步,先收藏

  6. Hobo
    十二月 7, 2009 11:19:11 #6

    那个颤动的效果不错哈哈

  7. ooaixt
    十二月 7, 2009 11:52:11 #7

    原来那个延时是故意的~~

  8. 久酷
    十二月 7, 2009 16:36:16 #11

    小木同学 你的侧边栏错位啦,调整下

    • 恩,刚调整来着呢,呵呵~

  9. 久酷
    十二月 7, 2009 16:37:16 #12

    浏览器版本 为 3.5.5

  10. zwwooooo
    十二月 7, 2009 18:43:18 #13

    简化很多,可惜我的主题用不来,图片问题,哈

    • 对哦,图片做背景的就麻烦了!

  11. zwwooooo
    十二月 7, 2009 18:46:18 #14

    哈,发现你用了文章伸缩栏效果,哼哼 :roll:

    • 效果还行吧?哈哈,侧边栏也搞成了Tab形式,嘻嘻!

    • 欢迎欢迎,为啥不把“网页设计工坊”去掉呢?为区分?呵呵

  12. SATURN
    十二月 7, 2009 19:58:19 #16

    折腾无止境,研究研究~~

  13. HzlzH
    十二月 9, 2009 14:16:14 #17

    恩,在你的激发下,探究了很久,只是有些主题的框架边缘不如你这款 更改后好看

  14. 铵铵
    十二月 11, 2009 02:59:2 #18

    不过没有抖动效果了呢.

    • 去掉了,这一抖可是要5KB的JS代码哦!

      • HzlzH
        十二月 11, 2009 18:26:18

        :!: 是的哦,瞬间的爽感不如长期的神速来的舒坦。

        • 嗯,太奢侈了,反正无关紧要嘛!

    • 是的,有些东东还是放本地安全些!

      • 听闻最近cn.备案查得好紧啊 群里有人说已经有13万个个人博客挂掉了 :mad: 前几天差点没冲动买个域名真是后怕啊 还是听月光的话吧 去美国注册去 服了天朝 (嘘,小声点):shock: 了

        • 貌似是吧,具体数据真假就不得知了。我现在是一天自动备份两次数据库~

  15. 这段代码加到哪里去哦 :!: 我加到header.php不行啊直接以文本显示到导航栏下了⊙﹏⊙b汗
    $(‘#close-sidebar a’).toggle(function(){
    $(this).text(“显示侧边栏”);
    $(‘#sidebar’).hide();
    $(‘#content’).animate({width: “960px”}, 1000); //让id=”content”,
    },function(){
    $(this).text(“关闭侧边栏”);
    $(‘#sidebar’).show();
    $(‘#content’).animate({width: “705px”}, 800); //让id=”content”,
    });

  16. 疾风
    十二月 20, 2009 23:45:23 #22

    怎么方便的给指定的文章页 关闭侧栏啊?~··

    • 这个就涉及到判断,我也不懂……

  17. Terry
    一月 22, 2010 01:36:1 #23

    :grin: :grin: :grin: 不错~~~可惜不懂~~~

  18. Terry
    一月 22, 2010 01:36:1 #24

    到现在还不懂

  19. 小奎
    二月 3, 2010 08:54:8 #25

    大大
    你怎麼做成有些地方是隱藏側邊欄的按鈕
    有些地方是訂閱小站
    是用 判斷的麻 :neutral:

  20. 嘿嘿,整了我一个下午,终于在zwwooooo的提示下搞定侧边栏的开关…留言以示感谢… :wink:

    • 呵呵,极力支持折腾,HOHOH!

  21. oumu
    四月 19, 2010 12:24:12 #27

    可以成功干掉侧边栏了,但是边栏取消之后文本内容仍然保持原来宽度 :arrow: ..可能是啥原因呢~?

  22. oumu
    四月 19, 2010 12:32:12 #28

    解决咯~去掉post-content的width就OK了~ 现在还有个点击之后文字变乱码的问题…

      • oumu
        四月 19, 2010 18:46:18

        :wink: 哦了~感谢~完全没这方面知识~ :arrow:

  23. 老四
    五月 9, 2010 12:17:12 #30

    这段代码更和谐了

  24. liuliu
    五月 11, 2010 16:43:16 #31

    :?: 怎么把这个关闭侧边栏的导航单独放在页面右上方?

    • 单独加了一个class,CSS里{float:right}

    • 随便放哪,你想头部显示就放header.php里~

      • wsl
        五月 25, 2010 13:32:13

        /* 可加在导航ul标签中 */ 你写的是这里?

  25. 丕子
    六月 29, 2010 19:32:19 #34

    $(document).ready(function(){
    $(‘.sidebar’).hide();
    $(‘#content’).animate({width: “910px”}, 1000);
    });
    这样放在页面中怎么不管用呢

    • 你的侧边栏是ID,不是class,主体部分的ID也不是这个……

  26. :cool: 好东西,收藏一下~

  27. 蝎紫
    九月 8, 2011 11:18:11 #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="">