关闭/显示侧边栏简洁版(适用于大前端主题)

默认显示”关闭侧边栏”，点击”关闭侧边栏”，侧边栏消失，显示”显示侧边栏”，具体效果点击文章右上角试试吧~

代码如下：在你需要的位置添加

<div class="close-sidebar"><a href="#">关闭侧边栏</a></div>
<div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div>

jQuery代码：

jQuery(document).ready(function($) {
    $('.close-sidebar').click(function() {
        $('.close-sidebar,.sidebar').hide();
        $('.show-sidebar').show();
        $('.content').animate({
            width: "1238px"
        },
        1000);
    });
    $('.show-sidebar').click(function() {
        $('.show-sidebar').hide();
        $('.close-sidebar,.sidebar').show();
        $('.content').animate({
            width: "838px"
        },
        1000);
    });
});

当然了，这里的.sidebar和.content都要修改成你自己网站的侧边栏类、文章主体类。

效果出来了，必然少不了美化一下

.close-sidebar,.show-sidebar{float:right;margin:-5px 0 0 10px;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;background-image: -webkit-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -moz-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -ms-linear-gradient(top, #fbfbfb, #e6e6e6);border: 1px solid #ccc;border-bottom-color: #bbb;border-radius: 1px;box-shadow: 0 2px 2px #ddd;}
.close-sidebar a,.show-sidebar a{color:#333;}
.close-sidebar:hover,.show-sidebar:hover{background:#f6f6f6;}
.close-sidebar:active,.show-sidebar:active{background:#f6f6f6;box-shadow: inset 0 2px 4px #ddd;}

这是简洁版！

感谢 imwangmin 投稿！