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

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>折叠菜单</title><link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script></head><body class><div class="container-fluid"><div class="row"><!-- 侧边栏 --><div class="sidebar"><h4>简书（me）</h4><div class="cover"><h2><img class="img-circle" src="images/icon_face1.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 class="main-title"><ul class="nav navbar-nav navbar-left navbar-side"><li><a href=""><i class="icon icon-menu"></i></a></li></ul></div></div><!--主体部分 完--></div></div><style>/* 只是针对bootstrap-2.2.1 */body {display: block;}[class*="span"]{float:none; min-width:auto; margin-left:0;}@font-face {font-family: 'iconfont';src: url('//at.alicdn.com/t/font_1474372709_4341202.eot'); /* IE9*/src: url('//at.alicdn.com/t/font_1474372709_4341202.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('//at.alicdn.com/t/font_1474372709_4341202.woff') format('woff'), /* chrome、firefox */url('//at.alicdn.com/t/font_1474372709_4341202.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/font_1474372709_4341202.svg#iconfont') format('svg'); /* iOS 4.1- */}.icon{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}.icon-home:before{content: "\e605";}.icon-article:before{content: "\e604";}.icon-ui:before{content: "\e601";}.icon-web:before{content: "\e606";}.icon-php:before{content: "\e603";}.icon-menu:before{content: "\e608";}.icon-setting:before{content: "\e600";}/* sidebar---------------------------------------- */.sidebar{position: fixed;width: 215px; height: 100%; background: #262930;transition: all .3s ease;}.sidebar > h4{margin: 0; padding: 18px 10px;background: #00bfa5; color: #fff; font-size: 18px; font-weight:normal;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: 100;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{margin:0; padding: 0;}.sidenav i, a{color: #9d9d9d; text-decoration: none;}.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; }/*.pull-right {*//*float: right;*//*}*/.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: 9999; 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: 0; left: 60px; z-index: 9999;display: none!important;width: 150px; border-left: none; list-style: none;}.sidebar-collapse .sidebar-dropdown > li > a{padding-left: 0; }.sidebar-collapse .sidebar-dropdown > li > a:hover{background: #191e26; text-decoration: none; color: #fff;}.sidebar-collapse .cover > h2 img{margin-left: 0; border: none;}/* main---------------------------------------- */.main{overflow: hidden; margin-left: 215px; transition: all .3s ease; padding-top: 50px;}.main-title{background: #fff; height: 50px; border-bottom: 1px solid #e5e4e4; position:fixed; top: 0; width: 100%;}.nav {margin-bottom: 20px;margin-left: 0;list-style: none;}.navbar-left{float:left; margin:15px 0 0 15px;}.navbar-side>li>a{color: #666;}.navbar-side>li>a:hover,.navbar-side>li>a:focus,.navbar-side>li>a:active{background: none;}</style><script>/* 侧边栏切换形态 */$(".navbar-side a").click(function(){$("body").toggleClass("sidebar-collapse");if($("body").hasClass("sidebar-collapse")){$(".sidebar > h4").html("简书");}else{$(".sidebar > h4").html("简书(me)");}return false;})$(".sidenav>li>a").click(function(){$(this).addClass("hover");$(this).next().slideToggle();$(this).parent().siblings().children("a").removeClass("hover").next().slideUp();})</script></body>
</html>

效果图：

QQ拼音截图未命名1.png

QQ拼音截图未命名2.png

jquery隐藏侧边栏和折叠侧边栏方法相关推荐

Python 小白从零开始 PyQt5 项目实战（7）折叠侧边栏的实现
单式状态栏,位于于窗口的左右侧边,可以实现软件功能或目录的导航. 本文详细介绍用 QTreeWidget 部件实现目录结构的折叠侧边栏,与用 QToolBox 部件实现垂直菜单结构的折叠侧边栏,通过案 ...
html图片的隐藏与显示,Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以 ...
原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解. 首先是display的方法 ...
jquery如何设置占位隐藏_JQuery显示、隐藏div的几种方法简明总结
AAA JS隐藏和显示div的方式有两种: 方式1:隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;&q ...
html中aside怎么调整位置,HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？...
HTML5中的aside标签怎么用?HTML5aside侧边栏的具体使用方法你知道吗?本篇文章主要讲解了HTML5中的aside标签的定义和用法,还有HTML5中aside元素的详解和注意事项. HT ...
JS jQuery显示隐藏div的几种方法
<div id="demo">AAA</div> JS隐藏和显示div的方式有两种: 方式1:隐藏后释放占用的页面空间通过设置display属性可以使di ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
jQueryHTMLCSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
JQuery Mobile中特有事件和方法
JQuery Mobile中特有事件和方法是本文要介绍的内容,主要是来了解JQuery Mobile中的事件和方法的应用,具体内容来看本文详解. 1.触摸屏事件-- Touch events tap ...

jquery隐藏侧边栏和折叠侧边栏方法

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

效果图：

jquery隐藏侧边栏和折叠侧边栏方法相关推荐

最新文章

热门文章