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

我的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(); 
     } 

    }); 
});

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

來源

2014-01-23 user3216077

對於您可以使用http://api.jquery.com/animate/ – flec

我的JavaScript知識很次冪的動畫。我需要jQuery功能。謝謝 – user3216077

沒有人會爲你寫代碼。你必須通過所給的資源來學習它。 – flec

此解決方案可能適合您。您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

來源

2014-01-23 15:57:00 badAdviceGuy

謝謝。你是否看到我的第二個問題：只有當摺疊打開時，如何菜單按鈕更改顏色，並點擊關閉其中的collpase，返回開始顏色，而不是專注？ – user3216077

我的帖子中沒有看到任何CSS，但那將是我要開始的地方。嘗試查看'：hover'功能，或者添加一些樣式到其中一個已經通過JS打開時應用的類。 – badAdviceGuy

我試試這個：focus，：active，並沒有結果。我認爲只有JavaScript才能做到。再次感謝你。 – user3216077

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

回答

相關問題