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

首先请自行导入相关的文件，主要用到的是MetisMenu。

效果图如下：

---

导航栏结构：

<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;      }   }});