Html jQuery-用于在3级文件夹结构中打开第一级文件夹的选择器

我在Angular 5中创建了一个3级文件夹结构，如下所示

<table class="table table-bordered table-striped">
    <ng-container *ngFor="let content of contents">
          <tr class="top-row">
             <td class="parent"><i id="parentFolder" class="fa fa-folder-open"></i>{{content.title}}</td>
           </tr>
       <ng-container *ngFor="let subFolder of contents['subfolder']">
           <tr class="object-row">
             <td class="child"><i id="childFolder" class="fa fa-folder-open"></i>{{subFolder.title}}</td>
            </tr>
            <tr *ngFor="let product of subfolder['innerFolder']">
              <td class="secondchild"><i class="fa fa-folder"></i>{{product.title}}</td>
            </tr>
       </ng-container>
    </ng-container>
</table>

---

这将同时打开

child（firstlevel）

和

secondchild（secondlevel）

要滑开，我的要求是只打开

child（firstlevel）

文件夹，您应该尝试以下代码：

$('.parent').click(function () {
      $(this).closest('.top-row').slideToggle(10, function () { });
}

---

此代码仅适用于最接近的父标记，该标记具有

顶行

类。希望它能帮助您。

您可以这样做：

• 首先使用

  .parents（'table'）

  选择表父级
• 如果有多个父表，请使用

  .first（）

  选择第一个
• 使用

  .find（'.child'）

  选择具有类'.child'的子级

例如：

$('.parent').click(function () {
 $(this).parents('table').first().find('.child').slideToggle(10, function () { });
});

---

这将关闭父文件夹并仅显示子文件夹和内部子文件夹

$('.parent').click(function () {
 $(this).parents('table').first().find('.child').slideToggle(10, function () { });
});