Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

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

Posted on 2016年9月17日2016年9月18日 by king2088

在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代码

O 打开侧边栏X 关闭侧边栏
我在左边
我在右边


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

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme