bootstrap 二級菜單選項卡

<div class="tabbable">
        <div class="nav nav-tabs">  
            <h2>個人中心</h2>
            <div class="nav-header" ><a href="#userMeun" data-toggle="collapse">查詢方法 <i class="icon icon_down_triangle"></i></a>
            </div>
            <ul id="userMeun" class="nav nav-list collapse in">
                <li><a href="#tab1" data-toggle="tab"> 方法一</a></li>
                <li><a href="#tab2" data-toggle="tab"> 方法二</a></li>
            </ul>
            <div class="nav-header" data-toggle="collapse"><a href="#tab3" data-toggle="tab"> 一級菜單</a></div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                <div class="content">
                     方法一

                </div>
            </div>
            <div class="tab-pane" id="tab2">
                <div class="content tab_describe">
                   方法2
                </div>
            </div>
            <div class="tab-pane" id="tab3">
                <div class="content tab_describe">
                   方法3
                </div>
            </div>
        </div>
    </div>

　　

　　方法一：標簽頁的切換

//標簽頁切換導航，讓標簽可切換, 需在.tab-content里創建.tab-pane, 並對每個標簽設置一個唯一的ID.要讓內容淡入, 需在每個.tab-pane添加.fade .或.in

標簽頁切換 最基本的格式
<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

　　方法二：折疊

只要在元素上添加 data-toggle="collapse" 和 data-target 就能自動變成可折疊的。 data-target 屬性接受一個css選擇器，以選取元素添加折疊。 一定要在折疊元素上添加 collapse 。如果要默認某折疊元素是打開的，只要添加 .in 。

如需要添加一個手風琴式可折疊組, 則需添加 data-parent="#selector"

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

　這個二級導航菜單 就是這2種簡單bootsrap js組件的結合

但是 其中 對於 active 的選中是有問題的 需要自己另外寫點方法

//memberlist 二級菜單點擊下拉
        $('.tabbable a[data-toggle="tab"]').eq(0).tab('show');
        $('.tabbable a[data-toggle="tab"]').on('click', function (e) {

            $('.tabbable a[data-toggle="tab"]').parent('li').removeClass('active');
            $('.tabbable a[data-toggle="tab"]').removeClass('active');
            $(this).addClass('active');

        });