jquery隱藏側邊欄和摺疊側邊欄方法

標籤：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隱藏側邊欄和摺疊側邊欄方法