首页 > 代码库 > jquery隐藏侧边栏和折叠侧边栏方法
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;}
完成，（>_<），
下一篇博文分享折叠侧边栏方法， （博主写的不够成熟， 毕竟还是新手~~）
jquery隐藏侧边栏和折叠侧边栏方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。