javascript - 如何使用 Bootstrap 导航列表自动显示/隐藏元素

Question

我有一个移动站点的 Bootstrap 导航列表，如果我单击该图标两次，我可以折叠和展开部分，但是当我单击一个按钮时，正确的部分折叠但是当我单击第二个按钮时，两个部分保持打开.我希望在单击第二个按钮时关闭第一个按钮。

这是一个例子 http://jsfiddle.net/MgcDU/2219/ .

<div class="navbar navbar-fixed-top visible-phone" style="margin-bottom: 0px;">
        <div class="navbar-inner">
                   <div >
                         <ul class="nav ">                          
                              <li class="">
                              <a href="#" data-toggle="collapse" data-target=".nav-collapse-filter"><i class="icon-filter"></i></a>
                           </li>
                     <li class="">
                        <a href="#" data-toggle="collapse" data-target=".nav-collapse-post"><i class="icon-plus"></i></a>
                            </li>

                      </ul>
        </div>

          <div class="nav-collapse nav-collapse-filter collapse">
                <ul class="nav">
                     <li class="divider"></li>  
                     <li class="nav-header">Filter By</li>                     
                       <li class=""><a href="Filter1">Filter1</a></li>                          
                       <li class=""><a href="Filter1">Filter2</a></li>                            
                       <li class=""><a href="Filter1">Filter3</a></li>                                
                       <li class=""><a href="Filter1">Filter4</a></li>                 
                       <li class=""><a href="Filter1">Filter5</a></li>   
                       <li class=""><a href="Filter1">Filter6</a></li>                                

                </ul>                       
            </div>                                  
            <div class="nav-collapse nav-collapse-post collapse">                        
              <ul class="nav">
                   <li class="divider"></li>
                   <li class="nav-header">Post something</li>
                   <li class=""><a href="Post">Post1</a></li>
                   <li class=""><a href="Post">Post2</a></li>
                   <li class=""><a href="Post">Post3</a></li>                         
                   <li class=""><a href="Post">Post4</a></li>
                   <li class=""><a href="Post">Post5</a></li>                              
                </ul>
            </div>

谢谢。

Answer 1

我认为您必须做一些手动工作才能实现该行为。

$("a[data-target='.nav-collapse-post']").click(function () {
    $(".nav-collapse-filter").collapse("hide");
    $(".nav-collapse-post").collapse('toggle');
});

$("a[data-target='.nav-collapse-filter']").click(function () {
    $(".nav-collapse-post").collapse('hide');
    $(".nav-collapse-filter").collapse("toggle");
});    

并且如果你不想要一个奇怪的，也从 nav-collapse-post 和 nav-collapse-filter 中删除类 collapse第一次点击时的行为。

结果:http://jsfiddle.net/ngHnh/