两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

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

实现思路：给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. Android--Volley框架的使用

    一.Volley特点 通信更快,更简单(数据量不大,但网络通信频繁) Get.Post网络请求及网络图像的高效率异步处理 排序(可以通过网络请求的优先级进行处理) 网络请求的缓存 多级别取消请求 和A ...

  2. (十二)Maven生命周期和插件

    除了坐标.依赖以及仓库之外,Maven的另外两个核心概念是生命周期和插件.在有关Maven的日常使用中,命令行的输入往往就对应了生命周期,如mvn package就表示执行默认生命周期阶段packag ...

  3. js生成和下载二维码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. 无刷新读取数据库 (ajax)

    <html> <head> <script type="text/javascript"> function loadXMLDoc() { va ...

  5. 部署JProfiler监控tomcat

    下载JProfiler包 wget http://download-keycdn.ej-technologies.com/jprofiler/jprofiler_linux_9_2.rpm 安装JPr ...

  6. c# MongoDB 经纬度应用示例

    class Program      {          static string mongodb = "mongodb://127.0.0.1:27017";        ...

  7. CODE[VS]4633Mz树链剖分练习

    Description 给定一棵结点数为n的树,初始点权均为0,有依次q个操作,每次操作有三个参数a,b,c,当a=1时,表示给b号结点到c号结点路径上的所有点(包括b,c,下同)权值都增加1,当a= ...

  8. 框架dubbox的简单使用

    之前: RPC: Remote Produedure Call :一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议 SOA: Service-oriented architect ...

  9. c#smtp多线程

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. 【BZOJ 3445】【Usaco2014 Feb】Roadblock

    http://www.lydsy.com/JudgeOnline/problem.php?id=3445 加倍的边一定在最短路上(否则继续走最短路). 最短路长度是O(n)的,暴力扫最短路上的每条边, ...