带有嵌套级别的jQuery show（）hide（）

Question

我在显示/隐藏生成的树中的下一个子级别时遇到了一个问题。 我认为这种情况与此处发布的其他问题有所不同，可以使用一些帮助。 我可以显示下一个级别，但是单击上一个级别以关闭当前级别非常困难。 我尝试了parent() ， next() ， find() ， closest() ， is(':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 first sublevel folders for each parent
$subFolder.each(function () {
    var $this = $(this);
    $this.find('.subfolder .subfolder').hide();

});

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

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

Answer 1

这是你想要的？ 我更改了一些班级名称

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

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

**** UPDATE * ***

我用你原来的班级名字

的jsfiddle