1

我有一个用于移动网站的带有引导程序的导航列表，如果我单击图标两次，我可以折叠和展开部分，但是当我单击一个按钮时，正确的部分会折叠，但是当我单击第二个按钮时，两个部分都保持打开状态。当我单击第二个按钮时，我希望第一个关闭。

这是一个示例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>

谢谢。

4

1 回答 1

2

我认为你必须做一些手工工作才能实现这种行为。

$("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");
});

如果您不希望在第一次单击时出现奇怪的行为，还可以删除该类collapse。nav-collapse-postnav-collapse-filter

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

于 2013-03-02T13:11:25.290 回答