两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

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

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

}

折叠侧边栏实现方法：

实现思路：和隐藏侧边栏实现基本上相同，折叠后（只显示图标的时候）使用css控制栏目显示和隐藏。

在线效果：折叠侧边栏效果， 我真是操碎了心（捂脸）

htm部分:

<body>

<div class="container-fluid">

    <div class="row">

        <!-- 侧边栏 -->

        <div class="sidebar">

            <h4>博客管理系统(四月)</h4>

            <div class="cover">

                <h2><img class="img-circle" src="data:images/icon_face.jpg"/></h2>

                <b>Hi~ 小主</b>

                <p>超级管理员</p>

            </div>

            <ul class="sidenav animated fadeInUp">

                <li><a class="withripple" href=""><i class="icon icon-home"></i><span class="sidespan">首页</span></a></li>

                <li><a class="withripple hover" href="javascript:;"><i class="icon icon-article"></i><span class="sidespan">文章管理</span><i class="iright pull-right">&gt;</i></a>

                    <ul class="sidebar-dropdown">

                        <li><a href="list.html" class="withripple" target="myframe">文章列表</a></li>

                        <li><a href="add.html" class="withripple" target="myframe">添加文章</a></li>

                    </ul>

                </li>

                <li><a class="withripple" href="javascript:;"><i class="icon icon-ui"></i><span class="sidespan">UI设计</span><i class="iright pull-right">&gt;</i></a>

                    <ul class="sidebar-dropdown">

                        <li><a href="" class="withripple">UI设计列表</a></li>

                        <li><a href="" class="withripple">添加作品</a></li>

                    </ul>

                </li>

                <li><a class="withripple" href="javascript:;"><i class="icon icon-web"></i><span class="sidespan">WEB前端</span><i class="iright pull-right">&gt;</i></a>

                    <ul class="sidebar-dropdown">

                        <li><a href="" class="withripple">文章列表</a></li>

                        <li><a href="" class="withripple">添加WEB作品</a></li>

                    </ul>

                </li>

                <li><a class="withripple" href="javascript:;"><i class="icon icon-php"></i><span class="sidespan">PHP后台</span><i class="iright pull-right">&gt;</i></a>

                    <ul class="sidebar-dropdown">

                        <li><a href="" class="withripple">PHP项目</a></li>

                        <li><a href="" class="withripple">添加项目</a></li>

                    </ul>

                </li>

            </ul>

        </div>

        <!-- 侧边栏 完-->

<!-- 主体部分  -->

        <div class="main">    主体部分的内容</div>

</body>

css部分：

/* sidebar

 ---------------------------------------- */

.sidebar{

  position: fixed;

  width: 215px; height: 100%; background: #262930;

  transition: all .3s ease;

}

.sidebar > h4{

  margin:; padding: 18px 10px;

  background: #00bfa5; color: #fff; font-size: 18px;

  white-space: nowrap;

}

.cover{

  padding-top:40px; padding-bottom: 10px;

  text-align: center;  background: #20242c;

}

.cover > h2{

  position: relative;

  margin: 0 auto; max-height: 80px; max-width: 80px;

  background: #3d4147; border: 1px solid #1ab394; border-radius: 50%;

}

.cover > h2 img{

  position: relative; z-index:;

  width: 100%; margin-left: -5px;

  border: 1px solid #1ab394;

}

.cover > h2:after{

  content:'';

  position: absolute; left: -12px; top: -8px;

  height: 96px; width: 96px;

  background: #3d4147; border-radius: 50%;

}

.cover > b{

  display: block;

  margin-top: 20px;

  color: #f3f3f4; font-size: 13px;

}

.cover > p{ margin-top: 4px;color: #acb0b8; font-size: 12px;}

/*sidenav*/

.sidenav,.sidebar-dropdown{padding:; }

.sidenav a{color: #9d9d9d; }

.sidenav > li > a{

  display: block; padding: 10px;

  font-size: 14px; border-left: 2px solid transparent;

  transition: .3s linear;

}

.sidenav > li > a > i{margin-right: 10px;}

.sidenav > li > a.hover,

.sidenav > li > a:hover{

  border-left: 2px solid #21b496; background: #20242c; text-decoration: none;

}

.iright{margin-top: 4px; font-family:"宋体"; font-style: normal; }

.sidebar-dropdown{

  display: none;

  font-size: 14px; background: #20242c; border-left: 2px solid #21b496; }

.sidebar-dropdown > li > a{display: block; padding: 10px 0 10px 36px;}

/*伸缩侧边css代码*/

.sidebar-collapse .main{margin-left: 60px;}

.sidebar-collapse .sidebar{width: 60px;}

.sidebar-collapse .sidenav > li{position: relative; z-index:; text-align: center;}

.sidebar-collapse .sidenav > li:hover > a{border-left: 2px solid #21b496; background: #20242c; text-decoration: none;}

.sidebar-collapse .sidenav > li:hover .sidebar-dropdown{display: block!important;}

.sidebar-collapse .cover > b{font-size: 12px;}

.sidebar-collapse .cover > p,

.sidebar-collapse .sidespan,

.sidebar-collapse .iright,

.sidebar-collapse .cover > h2:after{

    display: none;

}

.sidebar-collapse .cover{padding-top: 30px;}

.sidebar-collapse .cover > h2{margin: 6px;}

.sidebar-collapse .sidebar-dropdown{

  position: absolute; top:; left: 60px; z-index:;

  display: none!important;

  width: 150px; border-left: none; list-style: none;

}

.sidebar-collapse .sidebar-dropdown > li > a{padding-left:; }

.sidebar-collapse .sidebar-dropdown > li > a:hover{background: #191e26; text-decoration: none; color: #fff;}

.sidebar-collapse .cover > h2 img{margin-left:; border: none;}

/* main

 ---------------------------------------- */

.main{overflow: hidden; margin-left: 215px; transition: all .3s ease; padding-top: 50px;}

js部分：

/* 侧边栏切换形态 */

$(".navbar-side a").click(function(){

    $("body").toggleClass("sidebar-collapse");

    if($("body").hasClass("sidebar-collapse")){

        $(".sidebar > h4").html("博客");

    }else{

        $(".sidebar > h4").html("博客管理系统(四月)");

    }

    return false;

})

$(".sidenav>li>a").click(function(){

    $(this).addClass("hover");

    $(this).next().slideToggle();

    $(this).parent().siblings().children("a").removeClass("hover").next().slideUp();

})

完成，博主亲测可用（>_<）

jquery隐藏侧边栏和折叠侧边栏方法的更多相关文章

  1. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  2. js jQuery显示隐藏div的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...

  3. jQuery网站顶部定时折叠广告

    效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  4. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  5. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  6. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  7. jquery.nicescroll.min.js滚动条使用方法

    jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...

  8. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  9. jquery.validate remote 和 自定义验证方法

    jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate ...

随机推荐

  1. ARCGIS SDE空间化处理

    在 Oracle 中,ST_Geometry 和 ST_Raster 的 SQL 函数使用通过 Oracle 的外部过程代理(即 extproc)访问的共享库.要将 SQL 和 ST_Geometry ...

  2. Android中的AlertDialog使用示例五（自定义对话框）

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...

  3. 【代码笔记】iOS-正方形转换

    一,工程图. 二,代码. RootViewControlle.m //点击任何处,页面翻转 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEven ...

  4. 原创 C++作用域 （一）

    1概述 在所有的计算机程序中,一个基本的目标是操作一些数据,然后获得一些结果.为了操作这些数据,需要为这些数据分配一段内存,我们可以将这段内存称为变量.为了方便操作,以及程序可读性方面的考虑,需要使用 ...

  5. Couchbase 环境搭建与使用（C#）

    Couchbase Couchbase Server (前身是 Membase) 是一个分布式的面向文档的 NoSQL 数据库管理系统,该系统联合了 CouchDB 的简单和可靠以及 Memcache ...

  6. gridview安卓实现单行多列横向滚动

    <GridLayout android:layout_width="match_parent" android:layout_height="match_paren ...

  7. Juniper SSG5 PPTP VPN 619错误解决

    公司分部的客户端需要使用PPTP VPN连接总部,将网关更换为Juniper SSG5后,客户端出现了每几个小时自动断开的现象,错误619. 解决:Security —— ALG —— 开启PPTP协 ...

  8. C# 闭包问题-你被”坑“过吗？

    引言 闭包是什么?以前看面试题的时候才发现这个名词. 闭包在实际项目中会有什么问题?现在就让我们一起来看下这个不太熟悉的名词. 如果在实际工作中用到了匿名函数和lamada表达式,那你就应该高度注意啦 ...

  9. HDOJ 1009. Fat Mouse' Trade 贪心 结构体排序

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. Ubuntu16.04下安装VS Code

    在Ubuntu下面安装Visual Studio Code sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make sudo apt-get up ...