两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

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

实现思路：给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. MYSQL离线安装

    由于MySQL的广泛应用,MySQL的安装也就成了大家经常会碰到的问题.并且由于不是所有机器都可连接外网,所以MySQL的离线安装显得比较重要.而本文旨在介绍CentOS6.6下离线安装MySQL. ...

  2. hexo+next博客添加搜索

    1.为什么添加algolia搜索 第一当然是可以方便的查找所需文章,第二点就是之前常用的swiftype插件不再免费.我的个人博客是这个月初搭建完成的,这时候swiftype已经不再免费,而且只开放企 ...

  3. Dapper.NET——轻量ORM

    Dapper.NET使用 http://www.cnblogs.com/yankliu-vip/p/4182892.html 本文目录 Dapper.NET使用 1.为什么选择Dapper 2.以Da ...

  4. [转]An introduction to OAuth 2.0 using Facebook in ASP.NET Core

    本文转自:http://andrewlock.net/an-introduction-to-oauth-2-using-facebook-in-asp-net-core/ This is the ne ...

  5. There is no getter for property named 'useName' in 'class cn.itcast.mybatis.pojo.User'

    org.apache.ibatis.exceptions.PersistenceException: ### Error updating database.  Cause: org.apache.i ...

  6. Django基础之wsgi

    Django 一 什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演 ...

  7. Linux程序包管理.md

    rpm 简介 RPM包管理员(简称RPM,全称为The RPM Package Manager)是在Linux下广泛使用的软件包管理器.RPM此名词可能是指.rpm的文件格式的软件包,也可能是指其本身 ...

  8. docker学习(8) 在mac机上搭建私有仓库

    docker的私有仓库类似maven的私服,一般用于公司内部搭建一个类似docker hub的环境,这样上传.下载镜像速度较快,本文将演示如何在mac上利用docker-machine搭建无需SSL证 ...

  9. [LeetCode] Decode String 解码字符串

    Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], where ...

  10. 开发 ASP.NET vNext 续篇：云优化的概念、Entity Framework 7.0、简单吞吐量压力测试

    继续上一篇<开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1)>之后, 关于云优化和版本控制: 我本想做一下MAC和LINUX的self-ho ...