Menu Bootstrap 3 - hai nút thu gọn - chỉ một lần mở tại một thời điểm

Question

Tôi đang cố gắng tạo menu trong bootstrap 3. Khi xuống đến kích thước thiết bị di động, tôi có hai nút điều hướng thu gọn. Theo mặc định, khi một mở, nó chỉ được xếp chồng lên nhau. Những gì tôi muốn là một thả xuống mở tại một thời điểm.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    <div id="test2" class="nav-search collapse"> 
      <div class="search_box"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
      </ul> 
      </div><!-- end search_box --> 
     </div><!--/.nav-search --> 
    </div><!-- /.container-fluid --> 
</nav> 

tôi đã tìm kiếm và phát hiện này, nhưng đó là cho bootstrap 2: Bootstrap Menu - Two Collapse buttons which toggle each other? Meaning, only 1 open at a time

tôi cảm thấy như tôi đang thiếu một cái gì đó dễ dàng. Dưới đây là một liên kết jsfiddle: http://jsfiddle.net/Bootstrap714/RfsS9/4/

Answer 1

Bạn đã có tên của sự kiện sai. Bạn cần phải gọi nó trên on('show.bs.collapse'... thay vì chỉ trên on('show'....

Here is a fixed fiddle

Answer 2

Tìm thấy một loại "hackish" giải pháp

nếu, nút sibilings, không có một lớp học bị sập, click vào nó.

$('.navbar-toggle').on('click', function() { 
    if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) { 
     $(this).siblings('.navbar-toggle').click(); 
     } 
}); 

http://jsfiddle.net/t96Ry/