使用JQuery制作关闭打开侧边栏

在WEB前端开发中，经常都要使用JavaScript或者JQuery对前端进行相关处理，让页面更加人性化，让页面体验更好。而JQuery又是使用最多的JavaScript开源库，在web前端开发中被web设计师广泛使用，而我们在2栏、3栏布局的网页，为了方便用户浏览与体验，时常会使用到关闭侧边栏来将侧边栏关闭，让用户能够大屏幕浏览相关内容。
1、使用JQuery的hide(),show()以及animate方法来实现隐藏\显示，在隐藏\显示的过程中使用animate动画
2、效果图：

3、实现JavaScript代码

$(function(){
//点击关闭侧边栏
$('#hide').click(function(){
$('.r').hide();//隐藏.r
$('#hide').hide();//隐藏#hide关闭侧边栏字样
$('#show').show();//显示#show
$('.l').animate({//动画将左边栏的宽度增加到100%
width:'100%'
},300)
});
//点击打开侧边栏
$('#show').click(function(){
$('#show').hide();
$('#hide').show();
$('.l').animate({width:'70%'},300);
$('.r').fadeIn(2000);
});

4、CSS代码

.df{
margin: 80px auto;
width: 500px;
height: 200px;
border-top: 1px #CCC solid;
background: #fff;
}
.df .l{
width: 70%;
height: 200px;
float: left;
background: red;
border-right: 1px #CCCCCC solid;
}
.df .r{
width: 20%;
height: 200px;
float: right;
background: BLUE;
}
#tools{
z-index: 99999;
width: auto;
margin-top: -30px;
float: right;
}
#tools a{
font-size: 14px;
background: darksalmon;
color: #FFF;
padding: 2px 8px;
text-decoration: none;
border-radius: 6px;
-moz-border-radius: 6px;
opacity: 0.8;
margin-bottom: 1.250em;
}
#tools a:hover{
background: mediumaquamarine;
color: #FFF;
}
#tools a#show{
display: none;
}

5、html代码

如果自己懒得研究，我这里有做好的demo页面，地址：JQuery关闭打开侧边栏
点此下载demo