jQuery slideToggle, slide up другие элементы

Question

Привет Я использую jQuery слайд-переключатель на двух вложенных ul, однако, когда я нажимаю на вторичную ul, другая ul не продвигается вверх.

Как я могу получить jQuery для обнаружения правильного и сдвинуть его вверх?

У меня есть jsFiddle как пример того, что я делаю. Любые предложения относительно того, что я могу сделать по-другому?

Пример кода:

<ul class="top-category four columns"> 
    <li class="filter-title">Filter by: Blog Categories <span class="icon-arrow-down3"></span> 

     <ul class="child-category"> 
      <li class="filter-item"> 
       <input type="checkbox" id="tag_278" name="blog_categories[]" class="fintech siteset-checkbox" value="FinTech" data-name="FinTech">FinTech</li> 
     </ul> 
    </li> 
</ul> 
<ul class="top-category four columns"> 
    <li class="filter-title">Filter by: Staff <span class="icon-arrow-down3"></span> 

     <ul class="child-category"> 
      <li class="filter-item"> 
       <input type="checkbox" id="tag_283" name="staff[]" class="jan_stannard siteset-checkbox" value="Jan Stannard" data-name="Jan Stannard">Jan Stannard</li> 
     </ul> 
    </li> 
</ul> 

JQuery

$(".filter-title").click(function() { 
     $(this).children().nextAll('.child-category').slideToggle(); 
    }); 

CSS

.child-category {display:none} 

Answer 1

Попробуйте это:

$(".filter-title").click(function() { 
    var child = $(this).children('.child-category') , 
     rest = $('.child-category:visible').not(child); 

    child.slideToggle(); //toggle current one 
    rest.slideUp(); //close the rest 

}); 

Fiddle

Answer 2

Try с этим:

$(".filter-title").click(function() { 
    $('.child-category:visible').stop(true, true).slideToggle(); // <---add this line 
    $(this).find('.child-category').stop(true, true).slideToggle(); 
});