用Bootstrap实现折叠侧边栏

1. 首先实现一个普通侧边栏

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" id="bar-1"><a href="bar-1">Bar 1</a></li>
  <li role="presentation" id="bar-2"><a href="bar-2">Bar 2</a></li>
  <li role="presentation" id="bar-3"><a href="bar-3">Bar 3</a></li>
</ul>

上面的代码实现了最基本的侧边栏导航。

2. 接下来我们利用Bootstrap Collapse实现可折叠侧边栏

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" id="bar-1"><a href="bar-1">Bar 1</a></li>
  <li role="presentation" id="bar-2">
    <a href="#docCollapse" class="nav-header collapsed" data-toggle="collapse" id="collapseParent" onclick="chevron_toggle()">Bar 2<span class="pull-right glyphicon glyphicon-chevron-down"></span></a>
    <ul id="docCollapse" class="nav nav-list collapse">
      <li><a href="#">Child Bar 1</a></li>
      <li><a href="#">Child Bar 2</a></li>
    </ul>
  </li>
  <li role="presentation" id="bar-3"><a href="bar-3">Bar 3</a></li>
</ul>

上面代码利用Bootstrap的Collapse实现了折叠侧边栏。

3. 第二部代码中chevron_toggle()这个函数实现了Chevron Icon的切换，代码如下：

function chevron_toggle(){
    $("#collapseParent").find("span").toggleClass("glyphicon-chevron-up");
    $("#collapseParent").find("span").toggleClass("glyphicon-chevron-down");
}