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

});