1行のJQueryコードで伸縮ナビゲーションバーを実現

この実現効果は私がネットで見た例で、ちょうどJQueryを勉強して自分で実現しようと思っていたのですが、まだJQueryアニメーションを勉強していないうちに、何十行かのコードを書いて、いろいろな考えを考えてフローティングを設定したり、HTML構造を修正したりしました.実現できなかったので、もう少しで諦めるところだった.そしてJQueryアニメーションの部分を学んだときに簡単なJQueryパッケージの方法でslideUp()とslideDown()を解決しました.コードを見てみましょう.
HTMLドキュメント構造

    

        

            
  
            

                
  ChartJS
                
  Morris
                
  Flot
                
  linline charts
            
        
        

            
UI  
            

                
    
                
  lcons  
                
    
                
    
                
     
                
     
            
        
        

            
  
            

                
      
                
      
                
       
            
        
        

            
  
            

                
      
                
      
            
        
    

cssファイル

*{
    margin:0;
    padding:0;
    list-style:0;
    font-size:12px;
    color:#8aa4af;
    text-decoration: none;
}
.wrapUl{
    width:230px;
    height:800px;
    background:#222d32;
}
.list-caption{
    display:block;
    text-align: center;
    line-height: 44px;
    width:230px;
    height:44px;
    font-size:14px;
}
.innerList li{
    display:block;
    background:#2c3b41;
    width:223px;
    height:30px;
}
.innerList li:hover{
    background:#222d32;
}

.list-caption:hover{
    color:white;
}

最後のJQueryコード

    
    $().ready(function(){
        $('.list-caption').bind('click',function(){
            var $nextUl = $(this).next('.innerList');
            if($nextUl.is(':visible')){
                $nextUl.slideUp(1000);
            }else{
                $nextUl.slideDown(1000);
            }
        })
      
    });