ドロップダウンメニューを折りたたむ/隠す方法

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(); 

EDIT：アニメーションは0に、スパンは#newdivの前にする