jQuery SlideDown別の `ul`をクリックした場合のみ

Question

私は順序付けられていないリストを持っています。

<div class="categories-list"> 
    <ul class="display_categories"> 
     <li> 
      <a class="title"><span><b>1</b></span></a> 
      <ul class="display_subcategories"> 
       <li><a>22</a></li> 
       <li><a>22</a></li> 
      </ul> 
     </li> 
     <li> 
      <a class="title"><span><b>1</b></span></a> 
      <ul class="display_subcategories"> 
       <li><a>22</a></li> 
       <li><a>22</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

私は、ユーザーが任意のカテゴリをクリックすると、そのサブカテゴリーがslidedownすべきと同じカテゴリをクリックされるたびに、何が起こるべきではないことを望みます。ここに私のjQueryのは

$('.display_subcategories').hide() 
$('.title').click(function(){ 
    $('.display_categories').children().children('ul').slideUp('fast'); 
    $(this).next().slideDown('fast'); 
})     

だが、何が起こるかは、すでにslideDownカテゴリをクリックすると、それは再びスライドしてから滑り落ちるということです。

$('.display_subcategories').hide() 
$('.title').click(function() { 
    var $submenu = $(this).next().slideDown('fast'); 
    $('.display_categories').find('> li > ul').not($submenu).slideUp('fast'); 
}); 

Updated fiddle

も注意の使用：ここで

は、あなたがこのように、現在のすべてを除いてslideUp()にnot()を使用し、その後、現在のサブメニューをslideDownできjsFiddleリンク

Answer 1

ですfind()と子孫セレクタがチェーンオーバーchildren()がコールされます。

Answer 2

は、私はCSSクラスをトリガするか、無効にすることで、あなたのアニメーションを管理させることを示唆している。この

$('.display_subcategories').hide(); 

    $('.title').click(function(){ 
     if(!$(this).hasClass('down')){ 
      $('.title').removeClass('down'); 
      $('.display_categories').children().children('ul').slideUp('fast'); 
      $(this).next().slideDown('fast'); 
      $(this).addClass('down'); 
     } 
    }) 

Updated JS Fiddle

Answer 3

を試してみてください。簡単な例では、オープン<ul>に.activeクラスを追加されるだろうし、次のCSS：

.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; } 
.display_subcategories.active { max-height: 50px; } 

は、ここに私の提案とa modified JSFiddleです。