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

两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

下面，分享隐藏侧边栏实现方法：

实现思路：给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;
}

完成，（>_<），

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