两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

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

实现思路：给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. IT菜鸟的生存指南（一）那些人才适合从事IT行业

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- Just do ...

  3. 树莓派：raspberry pi 3b - NOOBS

    NOOBS - 多操作系统安装器,可以将不同支持树莓派的流行操作系统安装在一张SD卡中并提供一个启动管理工具,安装的不同操作系统相互独立,互不影响,是一种比较有意思的玩法. 从版本1.3.1开始到1. ...

  4. SQL Server 如何通过SQL语句定位SSRS中的具体报表

    在一些IT技术人员的推广.简单培训后,公司很多部门都有一些非IT技术人员参与开发各自需求的Reporting Service报表.原因很简单,罗列出来的原因大概有这样一些: IT部门的考量: 1:IT ...

  5. Spring类型转换 ConversionSerivce Convertor

    以String转Date为例:   定义转换器:    import java.text.ParseException; import java.util.Date; import org.apach ...

  6. MySQL 之 Metadata Locking 研究

    MySQL5.5 中引入了 metadata lock. 顾名思义,metadata lock 不是为了保护表中的数据的,而是保护 database objects(元数据)的.包括表结构.schem ...

  7. Oracle学习笔记四 SQL命令（二）：SQL操作语言类别

    SQL分为下列语言类别 1.数据定义语言(DDL) Create.Alter.Drop 2.数据操纵语言(DML) Insert.Select.Delete.Update 3.事务控制语言(TCL) ...

  8. nginx+php-fpm+mysql分离部署详解

    相信大家将这三者部署到同一台主机应该已经不陌生了,今天在这里,给大家演示一下如何将三者部署到三台主机上. 实验系统:CentOS 6.6_x86_64 实验前提:大部分软件使用编译安装,请提前准备好编 ...

  9. 图像处理中任意核卷积(matlab中conv2函数)的快速实现。

    卷积其实是图像处理中最基本的操作,我们常见的一些算法比如:均值模糊.高斯模糊.锐化.Sobel.拉普拉斯.prewitt边缘检测等等一些和领域相关的算法,都可以通过卷积算法实现.只不过由于这些算法的卷 ...

  10. [No00009C]Visual Studio在 解决方案资源管理器 里同步定位打开的文件

    标题的意思就是在使用VS的时候,需要我们打开编辑的文件跟解决方案的资源管理器同步显示,这样方便定位到我们在修改哪个文件. 设置如下: 工具——选项——项目和解决方案——在解决方案资源管理器中跟踪活动项 ...