如何把我的菜單動畫合攏關閉，當點擊該按鈕

Question

我的導航欄外是這樣的：

http://jsfiddle.net/Hg4Ts/3/

我的html代碼：

<div class="wrapper"> 
    <div class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="./">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 

我的JavaScript代碼：

$(document).ready(function() { 
    function CloseNav() { 
     $(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse"); 
     $(".navbar-toggle").stop().removeClass('collapsed'); 
    } 

    $('html').click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); 
     if (_opened === true && !clickover.hasClass("navbar-toggle")) { 
      CloseNav(); 
     } 

    }); 
}); 

如何在我的菜單中進行動畫合攏合攏，當點擊按鈕外部時。點擊按鈕外部時，它很接近，但沒有動畫效果。僅當摺疊打開時如何菜單按鈕更改顏色？

Answer 1

此解決方案可能適合您。您CloseNav（）函數切換到下面：

function CloseNav() { 
     $(".navbar-collapse").stop().animate({'height': 0},300, function() { 
      $('.navbar-collapse').removeClass('in').addClass("collapse"); 
     }); 
     $(".navbar-toggle").stop().removeClass('collapsed'); 
    }; 

它看起來像只需添加.collapse類的導航欄只會立即切換的高度。如果您製作動畫，然後添加該類，則會創建您想要的向上滑動效果。

fiddle demo