我使用html创建了一个基本表。该表具有嵌套元素,当您单击每个分配的切换时,应该单独打开。因此,当您单击" "图标时,它将打开A子菜单,该子菜单还具有图标" pitch",它可以打开单击时的信息页面。
这起作用,但是当我单击一个" "图标之一时,它将打开 sub菜单的两个,同样使用"俯仰"按钮,显然我不想发生,我希望能够独立打开和关闭这些。
任何人都可以告诉我如何修改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,因此您可以看到我的意思
任何帮助将不胜感激,我一直在为这个问题而苦苦挣扎。
使用可以使用.closest()和.next()
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(this).closest('tr').next('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
演示此处
更新: - 我发现这仅在每个主表条目( )只有一个子菜单项(pitch)时起作用。如果它的1个以上,它将仅显示第一个子菜单项目。
我应该重新编写我的问题。
我现在想揭示与特定组相关的所有子媒体,然后能够单独打开他们的详细信息。
我已经更新了主要问题,因此您可以看到我的意思