码迷,mamicode.com
首页 > Web开发 > 详细

jquery隐藏侧边栏和折叠侧边栏方法

时间:2016-12-14 18:40:34      阅读:852      评论:0      收藏:0      [点我收藏+]

标签:return   bsp   script   ase   通过   方法   ogg   image   显示   

两种效果如下所示:

隐藏侧边栏:

技术分享

 

折叠侧边栏:

技术分享

 

下面,分享隐藏侧边栏实现方法:

实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果

html部分:

<div class="sidebar">侧边栏</div>
<div class="main">主体部分</div>

 

css部分:

.sidebar{background: #333645;width: 200px; position: absolute; left: 0; top: 0; height: 100%; overflow: auto; transition: all 0.2s ease 0s;}
.main{overflow: hidden; position: absolute; left: 200px; right: 0; height: 100%; transition: all 0.2s ease 0s;}
.big-page .sidebar{left: -200px;}
.big-page .main{left: 0;}

 

js部分:

// 切换侧边栏
$(function(){
    // 切换侧边栏
    $(".navbar-left li").click(toggleSidebar);
});


//切换侧边栏显示隐藏
function toggleSidebar(){
	$("body").toggleClass("big-page");
	return false;
}

 

完成,(>_<),

下一篇博文分享折叠侧边栏方法, (博主写的不够成熟, 毕竟还是新手~~)

 

jquery隐藏侧边栏和折叠侧边栏方法

标签:return   bsp   script   ase   通过   方法   ogg   image   显示   

原文地址:http://www.cnblogs.com/zhangans/p/6180082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!