jquery menu slide down

Question

私はサブカテゴリを持つ垂直メニューを持っています。メインカテゴリをクリックすると、サブメニューがスライドし、以前に開いたサブメニューが上にスライドします。ユーザーが同じメインメニュー項目を2回クリックして、関連付けられたサブメニューを上にスライドさせたいと思っています。このコードでは、同じメインメニュー項目をもう一度クリックすると、ほぼ同時に開閉します。私は上記の場合は、あなたの説明からはわからない

$(".main-cat").click(function() { 
    $(".active-sub").hide('slow', function() { 
     $(".sub" , $(this).parent()).toggle('slow');  
     $(".sub" , $(this).parent()).addClass('active-sub'); 
    }); 
}); 

-

$(".main-cat").click(function() { 
    $(".active-sub").hide('slow'); 
    $(".sub" , $(this).parent()).toggle('slow');  
    $(".sub" , $(this).parent()).addClass('active-sub'); 
}); 

<div id="sidebar"> 
<ul> 
    <li class="main"> 
     <div class="main-cat 1">Real Estate</div> 
     <ul class="sub" id="sub_real_estate"> 
      <li><div class="sub-cat 2">Consulting Services</div></li> 
      <li><div class="sub-cat 3">Investment</div></li> 
      <li><div class="sub-cat 4">Property Management</div></li> 
      <li><div class="sub-cat 5"> Development</div></li> 
     </ul> 
    </li> 
    <li class="main"> 
     <div class="main-cat 6">Investment</div> 
     <ul class="sub" id="sub_investment"> 
       <li><div class="sub-cat 7">Philosophy</div></li> 
       <li><div class="sub-cat 8">Criteria</div></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

あなたは最初の変更が行われた後に実行される匿名関数、何かのようにあなたのコードを割り当てることによって、変更を遅らせることができますコードはそのトリックを行いますが、そのテクニックが役立つと思いました。

$(".main-cat").click(function() { 
    //hide or show clicked menu 
    $(".sub" , $(this).parent()).toggle('slow'); 
    //if clicked menu is now visible close all other open menus 
    if (!$(".sub" , $(this).parent()).is(':hidden')) $(".maincat").not(this).parents('li').find('ul:[class="sub"]').hide('slow'); 
}); 

Answer 2

この

を試してみてください - 私は以下のコードは、問題（http://jsfiddle.net/WftqT/1/）を固定すべきだと思うあなたのHTMLを見た

EDIT

$(".main-cat").click(function() { 
    $('.active-sub').toggle('slow'); 
    $(".sub" , $(this).parent()).addClass('active-sub').toggle('slow');  
}); 

Answer 3

コードを見るだけで、アクティブサブクラスも削除されないようです。あなたが要求した機能はあなたのHTMLに依存しますが、リストやdivやサブディビジョンがあれば、このjsFiddleはあなたの目標を達成します：jsFiddle

stopPropagation（）が追加されました。私はサブディビジョン誰かがその中で行動している場合に閉じる。

のjQuery：

$(".main-cat").click(function() { 
    current=$(this).find(".sub:hidden"); 
    $(".sub").slideUp(300); 
    if(current.length){ 
     current.slideDown(300);   
    } 
}); 
$(".sub").click(function(event){ 
    event.stopPropagation(); 
});