的jQuery的slideToggle家長和孩子

Question

這裏是我的代碼

<li class="page_item "><a href="javascript:">A</a> 
<ul class="children"> 
    <li class="page_item"><a href="">1</a></li> 
    <li class="page_item"><a href="">2</a></li> 
</ul> 
</li> 
<li class="page_item "><a href="">B</a> 
<ul class="children"> 
    <li class="page_item"><a href="">1</a></li> 
    <li class="page_item"><a href="">2</a></li> 
    <li class="page_item"><a href="">3</a></li> 
    <li class="page_item"><a href="">4</a></li> 
</ul> 
</li> 

<li class="page_item "><a href="">C</a> 
<ul class="children"> 
    <li class="page_item"><a href="">1</a></li> 
    <li class="page_item"><a href="">2</a></li> 
    <li class="page_item"><a href="">3</a></li> 
    <li class="page_item"><a href="">4</a></li> 
</ul> 
</li> 

$('.page_item').click(function(){ 

    $('ul.children').slideToggle(); 
}); 
ul.children{ 
    display: none; 
} 

online sample

我怎樣才能讓這樣的，當我點擊某個版塊，只需打開一個部分的孩子，當我點擊B，只顯示B的。沒有打開整個部分打開。 由於

Answer 1

範圍的滑動切換到當前元素，使用this：

$('.page_item').click(function(){ 
    var that = this; 
    $('.page_item').each(function(){ 
    if(that == this)return true;//continue 
    $('.children:not(:hidden)',this).slideToggle(); 
    }); 
    $('ul.children',this).slideToggle(); 
}); 

編輯以關閉其他顯示列表。 jsFiddle Demo

Answer 2

像這樣：

$('.page_item').click(function(){ 
    $('ul').slideUp(); 
    $(this).find('ul').slideToggle(); 

    return false; 
});