javascript - 一键切换打开所有表格行

Question

我使用 HTML 创建了一个基本表格。该表具有嵌套元素，当您单击每个指定的切换按钮时，这些元素应该单独打开。因此，当您单击“+”图标时，它会打开一个子菜单，其中还有一个“pitch”图标，单击该图标将打开一个信息页面。

这是可行的，但是当我单击其中一个“+”图标时，它会打开两个子菜单，同样使用“音调”按钮，这显然是我不希望发生的，我希望能够独立打开和关闭它们。

谁能告诉我如何修改 Javascript/HTML 来实现这一点？

我已附上以下代码...

<table>
<tr>
    <td></td>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 6</td>
    <td>Column 7</td>
</tr>
<tr>
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
    <td>Company</td>
    <td>47</td>
    <td>123</td>
    <td>22/10</td>
    <td>***</td>
    <td></td>
    <td></td>
        <td></td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>120</td>
    <td>105</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>14.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
    <td>
        <p>HELLO</p>
    </td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>120</td>
    <td>105</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>14.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
    <td>
        <p>HELLO</p>
    </td>
</tr>

 <tr>
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
    <td>Company</td>
    <td>48</td>
    <td>156</td>
    <td>22/10</td>
    <td>***</td>
    <td></td>
    <td></td>
        <td></td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
    <td>List</td>
    <td>156</td>
    <td>256</td>
    <td>22/10</td>
     <td>***</td>
    <td>23/6/2015</td>
    <td>16.95%</td>
    <td>30%</td>
</tr>
<tr class="cat1" style="display:none">
    <td>
        <p>HELLO</p>
    </td>
</tr>
</table>

我还附上了JSFiddle所以你可以明白我的意思

任何帮助将不胜感激，我已经为这个问题苦苦挣扎了一段时间。

Answer 1

使用可以使用.closest()和.next()

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $(this).closest('tr').next('.cat'+$(this).attr('data-prod-cat')).toggle();
    });
});

DEMO HERE