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

的的 **** 更新的 * ***

我使用了您原来的班级名称

JSFIDDLE

jQuery show（）hide（）与嵌套级别

1 个答案: