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;
}

在线样本

当我点击A部分,当我点击B时打开A部分的孩子时,我怎么能这样做,只显示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演示