javascript - 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部分时，只是为了打开A部分的孩子，当我点击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 演示

Answer 2

像这样：

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

    return false;
 });