Javascript 具有嵌套级别的jQuery show（）hide（）

我在显示/隐藏我生成的树中的下一个子级别时遇到了一些问题。我认为这个场景与这里发布的其他问题不同，需要一些帮助。我可以显示下一个关卡，但是点击上一关卡关闭当前关卡是很棘手的。我尝试了各种各样的组合，

parent（）

，

next（）

，

find（）

，

最近的（）

，

是（':visible'）

，它们似乎都与树上的其他节点交互，而不是与当前节点交互。例如，这里是显示

Folder 1
   Folder 1 Subfolder
      Folder 1 subfolder level 2
Folder 2
   Subfolder 1
   Subfolder 2
      Subfolder 2 sublevel

<div class="subfolder">
<a  href="#">Folder 1</a>
 <div class="subfolder">
    <a  href="#">Folder 1 Subfolder</a>
    <div class="subfolder">
        <a  href="#">Folder 1 subfolder level 2</a>
    </div>
  </div>
</div>
<div class="subfolder" title="This is the second folder">
<a href="#">Folder 2</a>
<div class="subfolder" title="">
    <a href="#">Subfolder 1</a>
</div>
<div class="subfolder" title="">
    <a href="#">Subfolder 2</a>
    <div class="subfolder">
        <a href="#">Subfolder 2 sublevel</a>
    </div>
  </div>
</div>

因此，我可以使用第二级子级别来显示

//show subfolders when parent is clicked, and hide details pane on any subfolder click
$subFolder.click(function () {
    $(this).children('div.subfolder').show();

});

但是使用

$（this.children（'div.subfolder'）.hide（）显然不能隐藏它们

基本上，我正在寻找一个交互，当单击文件夹1时，它将同时隐藏“文件夹1子文件夹”和“文件夹1子文件夹级别2”。使用上面的html结构，这样的事情可能吗

这是我最后一次得到的结果，大致上是这样，但仍然不起作用

 $subFolder.click(function () {
    $(this).children('div.subfolder').show();
    if ($(this).find('.subfolder').is(':visible')) {
     $(this).find('.subfolder').stop().hide();
     }
     if ($(this).find('.subfolder').is(':hidden')) {
     $(this).next().find('.subfolder').stop().show();
     }
});

这就是你要找的吗？我改了一些类名

$(".folder a").click(function () {
    $(this).siblings('.subfolder').slideToggle();
});

$(".subfolder a").click(function () {
    $(this).siblings('.innerfolder').slideToggle();
});

***更新***

我用了你原来的班名

$(".folder a").click(function () {
    $(this).siblings('.subfolder').slideToggle();
});

$(".subfolder a").click(function () {
    $(this).siblings('.innerfolder').slideToggle();
});

很遗憾，我无法更改类名。这将使一切变得容易得多。该结构如所述生成。谢谢though@apoji187好的，我保持课程不变，并更新了小提琴