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

当我点击A部分，当我点击B时打开A部分的孩子时，我怎么能这样做，只显示B's。没有打开整个部分打开。感谢

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

jQuery slideToggle父级和子级

2 个答案: