javascript - jQuery スライドの親と子の切り替え

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 デモ

Answer 2

このような：

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

    return false;
 });