jQuery 之关闭/显示侧边栏

发布于：电脑网络, 转来载去 2,986 次践踏

大家不用找了，这个效果我没有用在自己的博客上，只是在本地测试玩的，因为感觉代码简单，但是效果很不错，所以就从木木那里照搬过来了。木木称之为“关闭/显示侧边栏”完美终结版，不过我觉得如果能加上 Cookies 记录访客的行为，那就更完美了，再不过，如果是我的话，也不用 Cookies 记录，因为这个效果仅作点缀而已，没必要再多加几行脚本。下面贴代码。

1.载入 jQuery

木木提供了 jQuery1.4 版本下的方法，对我来说 jQuery1.4太过庞大，还是免了，咱们用大众版本的就可以了。

2、执行脚本

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

还是比较容易理解的，就不多解释了。

3、关闭/显示侧边栏的按钮

<a id="close-sidebar" href="javascript:void(0)">关闭侧边栏</a>

一般放在头部的导航栏就可以吧。

木帅的原文在此：http://immmmm.com/close-show-sidebar-prefect-code.html，或许在不久后上市的新主题，大家可以看到我用的这个效果，敬请期待～

  1. 对于一个wp新手而言，你和木木的教程是天书，但是对于稍微懂点wp的人就是很好的教程！！因为你们都是高手，哈哈 :twisted:

  4. 这个效果我刚开始玩wordpress的时候就有实现过，不过不是jquery，好像你这个效果更好，呵呵 ：）谢谢分享。

  8. 感觉这个jquery效果更适合用在纵向，博主空间把这效果用在横向，文字滚得人眼花，动画效果就不再赏心悦目了 :?:

    PS:这个留言板好像对Safari有bug，不能用鼠标切换焦点，只能用tab键，杯具~ :roll:

  36. 什么时候咱也能做个沙发啊。。。 :twisted:

    你这个代码我想到了一个用法，我的文章页由于帖的代码显示的问题在ie6下容易侧边栏错位，我这次设置能IE6下不显示侧边栏，哈哈，不错