关闭/显示侧边栏简洁

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

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script language="javascript">
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);
    });
});
</script>

.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;}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/187.html

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！