两种效果如下所示：

隐藏侧边栏：

折叠侧边栏：

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

实现思路：给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. 【代码笔记】iOS-由身份证号码返回性别

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  2. NSURLConnection学习笔记

    虽说现在都用三方库来获取网络数据,再不济也会用苹果官方的NSURLSession,但有些东西还是要先学会才有资格说不好不用,不是么? NSURLConnection发送请求是分为同步和异步两种方式的, ...

  3. iOS真机测试could not find developer disk image

    兄弟你该升级xcode的了,xcode的版本已经落后于手机的iOS版本了

  4. C# 在Repeater 的ItemDataBound 如何转换e.Item.DataItem 的类型

    1.使用DataSet和DataTable绑定数据源时,用 DataRowView view = (DataRowView)e.Item.DataItem; 2.DataReader绑定数据源时,用 ...

  5. nginx实现单服务代理多域名

    通过一台nginx服务器代理多个域名进行跳转,原理很简单,重点在玩法!适用于公司处理域名紧急备案问题. 域名: www.hx123.com www.hx456.com nginx服务器: ginx.c ...

  6. NFS网络共享服务部署

    10.3 NFS服务端部署环境准备 10.3.1 NFS服务部署服务器准备 服务器系统 角色 IP Centos6.7 x86_64 NFS服务器端(NFS-server) 192.168.1.14 ...

  7. 【C++】类和对象（构造与析构）

    类 类是一种抽象和封装机制,描述一组具有相同属性和行为的对象,是代码复用的基本单位. 类成员的访问权限 面向对象关键特性之一就是隐藏数据,采用机制就是设置类成员的访问控制权限.类成员有3种访问权限: ...

  8. Unity 重要基础知识点

    这是两个月前的学习记录,发出来了下,如果有误欢迎大家指出: 脚本生命周期 //每当脚本被加载时调用一次 // 1.   在Awake中做一些初始化操作 void Awake(){ //初始化publi ...

  9. Ubuntu在wps-office等qt5程序下不能切换中文fcitx输入法的问题

    经检查,是缺了fcitx-qt的包.比如qt5的程序,需要一个叫fcitx-libs-qt5的包. 如果您在基于qt的程序下不能使用基于fcitx的中文输入法,请检查以下包是否已安装: sudo ap ...

  10. Linux线程基础

    复习中掌握线程的基本管理即可,而不用考虑线程的同步: 创建线程花费的代价,比创建进程小得多,所以同一个进程的,多个线程执行多个任务-->比多个进程执行多个任务更有效率. 线程也分为用户级线程.内 ...