javascript - 尝试使用 jquery 显示/隐藏元素时遇到问题

Question

我为此苦苦挣扎了几个小时，却无法解决问题。
是否可以为此编写 jquery 代码，所以当 <span> 时单击它会这样做:

1. 搜索 <p> 中的任何一个已经显示 ( display:block ) 如果是，隐藏它们，如果不是，找到最近的 <p>其中<span>并显示出来。

2. 如果您点击 <span>谁的 child (<p>)已经活跃，隐藏它而不是显示它

你可以检查我的 fiddle Here或查看下面的代码:
HTML

    <div>
    <span>First</span>
    <p>1</p>
    </div>
    <!-- ... -->
    <div>
    <span>Second</span>
    <p>2</p>
    </div>

CSS

span{
    display:inline-block; 
    padding:8px;
    background:skyblue;
    color:white;
    font-family:helvetica;
    cursor:pointer;
}
div{
    display:inline-block; 
}
p{
    margin:0;
    padding:0;
    display:none;
}

Answer 1

您可以使用:

$('span').click(function(){
  $('p').not($(this).next()).hide();
  $(this).next().toggle();
});

Working Demo