jqueryを使用してこのサンプルのサイドメニューを改善するにはどうすればよいですか？

Question

私はこのhtmlコードを持つシンプルなサイドメニューがあります。

<div id="menu"> 
        <div> 
         Menu Title 
        </div> 
        <ul class="menu"> 
         <li> 
          <span> 
           first item 
          </span> 
          <ul> 
           <li> 
            sub item 
           </li> 
           <li> 
            sub item 
           </li> 
           <li> 
            sub item 
           </li> 
          </ul> 
         </li> 
         <li> 
          <span> 
           second item 
          </span> 
          <ul> 
           <li>sub menu</li> 
           <li>sub menu</li> 
          </ul> 
         </li> 
         <li> 
          <span> 
           third item 
          </span> 
          <ul> 
           <li> 
            sub menu 
           </li> 
           <li> 
            sub menu 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 

とCSSは次のとおりです。

#menu{ 
text-align:center; 
font-size:13px; 
font-family:tahoma; 
color:#0000AA; 
padding:2px 0;} 
#menu div{ 
color:#0000AA;} 
#menu ul{ 
text-align:right; 
background-color: #FFFFFF; 
list-style-type: none; 
margin: 0px; 
padding: 0px;} 
#menu ul li{ 
display:block; 
margin: 3px 2px; 
cursor:hand; 
cursor:pointer;} 
#menu ul li span{ 
width:100%; 
display:block; 
background-color:#DDDDFF;} 
#menu ul li span:hover{ 
background-color:#9999EE;} 
#menu ul li ul{ 
display:none;} 
#menu ul li ul li{ 
background-color:#EEEEEE; 
margin:2px; 
display: block;} 
#menu ul li ul li:hover{ 
background-color:#FFFFFF;} 
.submenu{ 
background-color: #CCCCFF;} 

とjqueryのコードは次のとおりです。

$(window).load(function(){ 
    $(".submenu").children(this).slideUp("slow"); 
}); 
$(document).ready(function(){ 
    $('ul.menu li span').click(function(){ 
    $("ul.menu li").find('ul').slideUp('fast'); 
    $(this).parent(this).find('ul').slideDown('fast'); 
    }); 
}); 

と私のcomplateメニューがhttp://jsfiddle.net/parseha/NkuG5/3/ 内で検索しますこの問題は次のとおりです：最初のアイテムをクリックすると、サブメニューが上にスライドしてから下にスライドすると、これは実行しません。
このテキストとコンテンツの間違いありがとう。

Answer 1

どのメニューが展開されているかを追跡し、その状態（展開または折りたたみ）に応じて、取り込むアクション（スライドまたはスライド）を決定するのがトリックです。

これは、展開時にメニュー項目にクラスを追加し、折りたたまれたときにそのクラスを削除することで実現できます。そのクラスが存在すると、メニューが展開されているのか折りたたまれているのかがわかります。

のjQueryコード：

$(window).load(function() { 
    $(".submenu").children(this).slideUp("slow"); 
}); 
$(document).ready(function() { 
    $('ul.menu li span').click(function() { 
     if ($(this).hasClass('current')) 
     { 
      $(this).removeClass('current'); 
      $("ul.menu li").find('ul').slideUp('fast'); 

     } 
     else 
     { 
      $(this).addClass('current'); 
      $(this).parent(this).find('ul').slideDown('fast');    

     } 
    }); 
}); 

Demo

Answer 2

"兄弟" セレクタとslideToggleを（使用）は、それの現在の状態に基づいてDOMを表示または非表示になります。私は私が必要とする前にこのモデルを使用していますが、xbonez存在スーパー

$(window).load(function(){ 
    $(".submenu").children(this).slideUp("slow"); 
}); 
$(document).ready(function(){ 
    $('ul.menu li span').click(function(){ 
     $(this).siblings('ul').slideToggle('fast'); 

    }); 
});