只需點擊一下即可打開所有表格行

我使用HTML創建了一個基本表格。此表具有嵌套的元素，當您單擊每個指定的切換時，應該單獨打開這些元素。所以當你點擊一個'+'圖標時，它會打開一個子菜單，該菜單上還有一個圖標'pitch'，用於打開點擊時的信息頁面。只需點擊一下即可打開所有表格行

然而，當我點擊其中一個'+'圖標時，它會打開這兩個的子菜單，同樣與'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所以你可以看到我是什麼意思

任何幫助將不勝感激，我一直在努力與此問題一段時間。

來源

2015-05-12 Chris

使用可以使用.closest（）和的.next（）

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

DEMO HERE

來源

2015-05-12 21:11:46

更新： - 我發現，這隻能在每一個主表項（+）只有一個子菜單項（音調）。如果它超過1，它只會顯示第一個子菜單項。

我應該重新說我的問題。

我現在想要揭示與特定組相關的所有子菜單，然後能夠單獨打開其詳細信息。

我已更新主要問題，所以你可以看到我的意思

來源

2015-05-13 10:13:26 Chris

只需點擊一下即可打開所有表格行

回答

相關問題