1

モバイル サイト用のブートストラップ付きのナビゲーション リストがあり、アイコンを 2 回クリックするとセクションを折りたたんだり展開したりできますが、ボタンをクリックすると正しいセクションが折りたたまれますが、2 つ目のボタンをクリックすると両方のセクションが開いたままになります。2番目のボタンをクリックすると、最初のボタンが閉じます。

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

また、最初のクリックで奇妙な動作が必要ない場合は、 andcollapseからクラスを削除します。nav-collapse-postnav-collapse-filter

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

于 2013-03-02T13:11:25.290 に答える