Question

我使用HTML创建了一个基本表。此表具有嵌套元素，当您单击每个指定的切换时，这些元素应单独打开。所以当你点击＆＃39; +＆＃39;它会打开一个子菜单，其中包含许多表格行，其中每一个都有一个图标＆＃39; pitch＆＃39;这样就可以在点击时打开信息页面。

目前正在发生的事情是，当我点击＆＃39; +＆＃39;它只显示第一个子菜单项，而不是第二个子菜单项。

我想要发生的是当我点击＆＃39; +＆＃39;图标，它打开所有里面的子菜单项，从这里我可以通过点击相应的＆＃39;音高来打开每个单独的项目。图标。

任何人都可以告诉我如何修改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>

此外，我附上JSFiddle，以便您可以看到我的意思

非常感谢任何帮助，我一直在努力解决这个问题。

非常感谢

Answer 1

您需要使用nextAll方法而不是next：

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

FIDDLE

Answer 2

试试这个

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $(this).toggleClass("expand");
    var className = 'cat'+$(this).attr('data-prod-cat');
    var $current= $(this).closest('tr').next();
    while($current.hasClass(className)){
        if($(this).hasClass("expand")){
           $current.show();
           $current = $current.next().next();
        }
        else{
           $current.hide();
           $current = $current.next();
        }

    }

});
    $(".pitcher").click(function(e){
    e.preventDefault();
    var className = 'cat'+$(this).attr('data-prod-cat');
    $(this).closest('tr').next().toggle();
    });
});

JS小提琴：https://jsfiddle.net/w6dvyshj/8/

切换HTML表格内的表格行

2 个答案: