[bootstrap] sidebarにアコーディオンを実装する

けっこう探した（つもりだ）けど、よいサンプルが見つからなかったので、自前で実装しました。

sidebar.html

<div class="col-xs-3 col-xs-2 sidebar">
  <ul class="nav nav-sidebar">
    <li data-toggle="collapse" href="#collapse-A">
      <a href="#"><span class="caret"></span> menu A</a>
    </li><!-- collapse を正常に動作させるためには、閉じタグが必要。閉じないと、下記のリンクをクリックしたときに、collapse が発火する -->
    <ul id="collapse-A" class="collapse">
      <li><a href="A-1">A-1</a><!-- 閉じタグ省略可能 -->
      <li><a href="A-2">A-2</a><!-- 閉じタグ省略可能 -->
      <li><a href="A-3">A-3</a><!-- 閉じタグ省略可能 -->
    </ul>
    <li data-toggle="collapse" href="#collapse-B"><a href="#"><span class="caret"></span> menu B</a></li><!-- collapse を動作させるために閉じタグが必要 -->
    <ul id="collapse-B" class="collapse">
      <li><a href="B-1">B-1</a><!-- 閉じタグ省略可能 -->
      <li><a href="B-2">B-2</a><!-- 閉じタグ省略可能 -->
      <li><a href="B-3">B-3</a><!-- 閉じタグ省略可能 -->
    </ul>
  </ul>
</div>

入れ子のリストが、あまりかっこよくない。。。

ので、list-style-typeを指定しました。

sidebar2.html

<div class="col-xs-3 col-xs-2 sidebar">
  <ul class="nav nav-sidebar">
    <li data-toggle="collapse" href="#collapse-A">
      <a href="#"><span class="caret"></span> menu A</a>
    </li>
    <ul id="collapse-A" class="collapse" style="list-style-type:none;">
      <li><a href="A-1"><span class="fa fa-angle-double-right fa-fw"></span> A-1</a>
      <li><a href="A-2"><span class="fa fa-angle-double-right fa-fw"></span> A-2</a>
      <li><a href="A-3"><span class="fa fa-angle-double-right fa-fw"></span> A-3</a>
    </ul>
    <li data-toggle="collapse" href="#collapse-B">
      <a href="#"><span class="caret"></span> menu B</a>
    </li>
    <ul id="collapse-B" class="collapse" style="list-style-type:none;">
      <li><a href="B-1"><span class="fa fa-angle-double-right fa-fw"> B-1</a>
      <li><a href="B-2"><span class="fa fa-angle-double-right fa-fw"> B-2</a>
      <li><a href="B-3"><span class="fa fa-angle-double-right fa-fw"> B-3</a>
    </ul>
  </ul>
</div>

参照

• sidebarのサンプル
• collapseの動作
• Font Awesome