使用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代码

<div class="df">
  <div id="tools">
    <a id="show" href="#">O 打开侧边栏</a><a id="hide" href="#">X 关闭侧边栏</a>
  </div>
  <div class="l">我在左边</div>
  <div class="r">我在右边</div>
</div>

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注