如何合拢/隐藏下拉菜单

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