MetisMenu : Jquery + CSS 实现可隐藏的二级侧边栏导航

效果图如下：

导航栏结构：

<span id="leftpane-toggle" class="glyphicon glyphicon-align-justify"></span>
<ul id="left-sider-menu" class="left-sider">
<li>
<a href="#">
<%= content_tag(:i, "", :class => "fa fa-dashboard fa-fw") %>
Overview
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-fw"></i>
A
<span class="fa arrow"></span>
</a>
<ul class="left-sider nav-second-level">
<li>
<a href="/test/a"> a </a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-users fa-fw"></i> B<span class="fa arrow"></span>
</a>
<ul class="left-sider nav-second-level">
<li>
<a href="/test/b"> b </a>
</li>
</ul>
</li>
<li>
<a href="/test/c">
<%= content_tag(:i, "", :class => "fa fa-cloud-download") %>
<span style="margin-left:4px;"> C</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-table fa-fw"></i>
D
<span class="fa arrow"></span>
</a>
<ul class="left-sider nav-second-level">
<li class="left-sider nav-second-level">
<a href="/test/d1"> d1 </a>
</li>
<li>
<a href="/test/d2"> d2</a>
</li>
<li>
<a href="/test/d3"> d3 </a>
</li>
<li>
<a href="/test/d4"> d4</a>
</li>
<li>
<a href="/test/d5"> d5 </a>
</li>
</li>
</ul>

CSS代码：

$grey: #F8F8F8;
$dark-grey: #EEEEEE;
$transparent-grey: #EEEEEE;
$grey-blue: #428BCA;
$white: #FFFFFF;
$black: #333333;
.navbar {
margin: 0;
background:$grey;
}
#main {
background: $white;
height: 100%;
position: relative;
margin-top:0;
&.toggle {
#leftpane {
left: -230px;
}
#content { margin-left: 0; }
}
}
#leftpane {
background: $grey;
height: 100%;
left: 0;
overflow-x: hidden;
padding-top: 45px;
position: absolute;
top: 0;
// transition: .5s;
width: 275px;
z-index: 1;
ul {
list-style: none;
padding: 0;
}
}

.left-sider {
background-color: $grey;
li{
border-color:$dark-grey;
border-width:1px;
border-top-style:  solid;
}
a {
color: $grey-blue;
display: block;
font-size: 14px;
padding: 10px 10px 10px 24px;
text-decoration: none;
transition: .3s;
}
a:hover {
background-color: $transparent-grey;
}
}
.left-sider .nav-second-level {
background-color: $grey;
li{
border-color:$dark-grey;
border-width:1px;
//border-bottom-style:  solid;
}

a {
color: $grey-blue;
display: block;
font-size: 13px;
padding: 10px 10px 10px 44px;
text-decoration: none;
transition: .3s;
}
a:hover {
background-color: $transparent-grey;
}
}

#leftpane-toggle {
color: $grey-blue;
font-size: 16px;
left: 240px;
position: absolute;
top: 15px;
}
#content {
min-height: 600px;
margin-top: 0px;
margin-left: 250px;
margin-right: 5px;
padding: 1px 40px 1px 80px;
// transition: margin-left .5s;
}
.left-sider .arrow {
float: right;
}
.left-sider .fa.arrow:before {
content: "\f104";
}
.left-sider .active > a > .fa.arrow:before {
content: "\f107";
}
.left-sider li.active {
background-color: $grey;
}
.left-sider .nav-second-level li.active {
background-color: $transparent-grey;
}

JS代码：

$(document).ready(function () {
$('#leftpane-toggle').on('click', function(e) {
e.preventDefault();
$('#main').toggleClass('toggle');
$('.navbar-brand').toggleClass('toggle');
if (sessionStorage.getItem('isToggled') == 'true') {
sessionStorage.setItem('isToggled', 'false');
} else {
sessionStorage.setItem('isToggled', 'true');
$('.navbar-brand').addClass('toggle');
}
});

$('#left-sider-menu').metisMenu();
$( ".left-sider .nav-second-level li" ).click(function(){
//$(".left-sider  li").removeClass("active");
$(".left-sider .nav-second-level li").removeClass("active");
$(this).addClass("active");
});

var window_url = window.location.toString();
var temp = window_url.split("//",2)[1];
var url = "/" + temp.split("/",2)[1];
$('.left-sider li a').filter(function() {
return $(this).attr("href") == url;
}).parent().addClass('active');
var element = $('.left-sider .nav-second-level li a').filter(function() {
return $(this).attr("href") == url;
}).parent().addClass('active');

var window_url = window.location.toString();
var temp = window_url.split("//",2)[1];
var url = "/" + temp.split("/",2)[1];
$('.left-sider li a').filter(function() {
return $(this).attr("href") == url;
}).parent().addClass('active');
var element = $('.left-sider .nav-second-level li a').filter(function() {
return $(this).attr("href") == url;
}).parent().addClass('active');

while (true) {
if (element.is('li')) {
element = element.parent().addClass('in');
element = element.parent().addClass('active');
} else {
break;
}
}

});