如何合攏/隱藏下拉菜單

Question

我想在用戶選擇後隱藏我的下拉菜單。我想它最終看起來像<span class="glyphicon glyphicon-menu-hamburger"></span>

下面是我已經開始的一些代碼，但無法弄清楚如何隱藏菜單。謝謝。

<ul class="dropdown-menu"> 
    <li class="dropdown-submenu"> 
     <a class="test" tabindex="-1" href="#">2014<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="">Q1</a></li> 
      <li><a tabindex="-1" href="">Q2</a></li> 
      <li><a tabindex="-1" href="">Q3</a></li> 
      <li><a tabindex="-1" href="">Q4</a></li> 
     </ul> 
     <div class="btn-group bt-toggle"> 
      <button type="button" class="btn btn-default" ng-click="toggleFilters();">Select Year</button> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </button> 
     </div> 
    </li> 
</ul> 

Answer 1

我包無論是在在一個div的「.dropdown-子菜單」，並做一些事情，如：

$("#newdiv").hide() 
$("#newdiv").animate({height: '0px'}, "slow"); 
$(".dropdown-submenu").append("<span class=\"glyphicon glyphicon-menu-hamburger\"></span>"); 

或者，有跨度出現，隱藏，顯示它..所以不是，你必須

<ul class="dropdown-menu"> 
    <li class="dropdown-submenu"> 
     <span class="glyphicon glyphicon-menu-hamburger aspan" style="display:none;"></span> 
     <div id="newdiv"> 

     <a class="test" tabindex="-1" href="#">2014<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="">Q1</a></li> 
      <li><a tabindex="-1" href="">Q2</a></li> 
      <li><a tabindex="-1" href="">Q3</a></li> 
      <li><a tabindex="-1" href="">Q4</a></li> 
     </ul> 
     <div class="btn-group bt-toggle"> 
      <button type="button" class="btn btn-default" ng-click="toggleFilters();">Select Year</button> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </button> 
     </div> 
    </div> 
    </li> 
</ul> 

和JS：

$("#newdiv").hide(); 
$("#newdiv").animate({height: '0px'}, "slow"); 
$(".aspan").show(); 

編輯：動畫應該去0，並跨度應該在#newdiv