Question

我在同一页面上遇到多个切换问题。

基本上我有表格设置来立即显示某些信息，包含一个切换按钮以扩展表格以显示更多信息。

我有切换工作但是问题是在同一页面上添加额外的表+切换只有一个可以工作。我希望每个人都是独立的。

我在网站点看过类似的情况，但我似乎无法点击它。

的Javascript

<script type="text/javascript">
$(window).load(function(){
$("#expand").on('click',function(){
    $("[data-rows='togglerow']").toggle();
    $(this).toggleClass("collapse");

})
});</script>

HTML

<table id="product-table" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<table width="100%" cellspacing="0" cellpadding="4">
<tbody>
<tr id="tabs">
<td class="tabbg" colspan="2" width="20%">1</td>
<td class="tabbg" width="13%">2</td>
<td class="tabbg" width="12%">3</td>
<td class="tabbg" width="20%">4</td>
<td class="tabbg" width="14%">5</td>
<td class="tabbg" width="11%">6</td>
</tr>
<tr class="prod-info top">
<td class="product-title">1</td>
<td class="expand-more">
    <span id="expand">1</span>
</td>
<td>1</td>
<td>-</td>
<td>2</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table id="product-table-bottom" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="prod-info bottom" style="display: none;" data-rows="togglerow">
<td class="product-title">
<a class="button-left">1</a> 
<a class="button-left">2</a> 
<a class="button-left pdf-download" href="#">3</a></td>
<td width="20%"><a class="button-right">4</a></td>
</tr>
</tbody>
</table>

非常感谢任何帮助。

Thnaks！

Answer 1

我相信你需要修改按钮，以便expand是一个类。页面上只有一个元素应该具有特定的id，但是许多元素可以具有相同的类。每张桌子你需要一个按钮吗？

考虑到这一点，它切换所有内容的原因是因为你的选择器正在选择所有内容，所以你必须稍微修改它才能使它只切换你想要的东西。

我的想法是使用parent()函数几次，直到找到父tbody，然后从那里找到你需要的东西。

考虑到所有这些，这应该适合你。

$(window).load(function(){
    $(".expand").on('click',function(){
        $(this).parent().parent().find("tr [data-rows='togglerow']").toggle();
        $(this).toggleClass("collapse");
    });
});

Jquery切换 - 同一页面上的多个选项

1 个答案: