jQuery 之关闭/显示侧边栏

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

大家不用找了，这个效果我没有用在自己的博客上，只是在本地测试玩的，因为感觉代码简单，但是效果很不错，所以就从木木那里照搬过来了。木木称之为“关闭/显示侧边栏”完美终结版，不过我觉得如果能加上 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，或许在不久后上市的新主题，大家可以看到我用的这个效果，敬请期待～