## 如图
## CSS
```
<style>
/*-----------------导航hack--------------------*/
.nav-list > li.open { position: relative; }
.nav-list > li.open .back { display: none; }
.nav-list > li.open .normal { display: inline-block !important; }
.nav-list > li.open a { padding-left: 7px; }
.nav-list > li .submenu > li > a { background: #fff; }
.nav-list > li .submenu > li a > [class*="fa-"]:first-child { left: 20px; }
.nav-list > li ul.submenu ul.submenu > li a > [class*="fa-"]:first-child { left: 30px; }
/*----------------导航hack--------------------*/
</style>
```
## HTML
```
<!--菜单/start-->
<div id="nav-wrapper">
<ul class="nav nav-list">
<li>
<!--1级菜单/start-->
<a href="#" class="dropdown-toggle">
<i class="fa fa-cogs normal"></i><span class="menu-text normal">系统设置 </span><b class="arrow fa fa-angle-right normal"></b>
</a>
<!--1级菜单/end-->
<!--2级菜单/start-->
<ul class="submenu">
<li><a href="#"><i class="fa fa-caret-right"></i><span class="menu-text">网站信息</span></a></li>
<li><a href="#"><i class="fa fa-caret-right"></i><span class="menu-text">邮箱配置</span></a></li>
</ul>
<!--2级菜单/start-->
</li>
</ul>
</div>
<!--菜单/end-->
```
如图：
## JS
```
<script>
//菜单折叠效果
var ismenumin = $("#sidebar").hasClass("menu-min");
$(".nav-list").on("click", function (event) {
var closest_a = $(event.target).closest("a");
if (!closest_a || closest_a.length == 0) {
return
}
if (!closest_a.hasClass("dropdown-toggle")) {
if (ismenumin && "click" == "tap" && closest_a.get(0).parentNode.parentNode == this) {
var closest_a_menu_text = closest_a.find(".menu-text").get(0);
if (event.target != closest_a_menu_text && !$.contains(closest_a_menu_text, event.target)) {
return false
}
}
return
}
var closest_a_next = closest_a.next().get(0);
if (!$(closest_a_next).is(":visible")) {
var closest_ul = $(closest_a_next.parentNode).closest("ul");
if (ismenumin && closest_ul.hasClass("nav-list")) {
return
}
closest_ul.find("> .open > .submenu").each(function () {
if (this != closest_a_next && !$(this.parentNode).hasClass("active")) {
$(this).slideUp(150).parent().removeClass("open")
}
});
}
if (ismenumin && $(closest_a_next.parentNode.parentNode).hasClass("nav-list")) {
return false;
}
$(closest_a_next).slideToggle(150).parent().toggleClass("open");
return false;
});
</script>
```
