我有一个只有一个td的数据表，每个td都有一个collapse元素，在第一页上一切正常但在所有其他页面上显示的元素已扩展并且不能崩溃。据我所知，问题是第二页/第三页已被隐藏，当我通过数据表调用它时，所有元素都可见，我无法找到解决方法，我们非常感谢任何帮助。
这是链接http://86.107.56.8/，代码是：
$(document).ready(function() {
oTable = $("#example").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bFilter": true,
"bInfo": false,
"aaSorting": [[ 2, "asc" ]],
"iDisplayLength": 2,
"aLengthMenu": [[2, 4, 6], [2, 4, 6]]
});
} );
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
<div style="width:704px">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="100px">escala</th>
<th width="520px">detalii</th>
<th width="40px">pret</th>
<th width="4px">valuta</th>
<th width="40px">buton</th>
</tr>
</thead>
<tbody>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
<tr>
<td width="60px" align="center"><p>Fara<br />escala</p></td>
<td width="520px">
<div class="layer1">
<p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
<div class="content"><p>Detalii zbor</p></div>
</div>
</td>
<td width="40px" align="right">10</td>
<td width="4px" align="left">€</td>
<td width="40px" align="right">buton</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
尝试使用此代码$(this).next().slideToggle(500);（在下一个函数中没有选择器）
答案 1 :(得分：0)
我无法确定，因为提供的链接不再进入DataTable页面。
我的猜测是问题就在于此：您在文档就绪函数中隐藏和绑定单击。这意味着当文档准备好时它会触发ONCE。不再调用这些函数。
我需要花更多的时间来查看代码，以便更好地了解要隐藏哪些元素，但一般来说，您应该做的是将隐藏功能粘贴到插件自己的{{1}中初始化回调函数。但是，我实际上不确定用jQuery隐藏它是最好的方法。同样，我还需要深入研究示例代码。
关于点击，当您转到下一页时，表格将“重新绘制”。如果您使用的是jQuery 1.7+，则应使用fnDrawCallback事件绑定函数而不是.on()。这个可以保留在文档就绪功能中。但是，您将选择并分配与.click()不同的侦听器。为此，我们将稍微修改HTML：
HTML：
.heading()JS：
<div class="tableWrapper" style="width:740px"> <!-- you should not have inline styles; you can add width to the new tableWrapper class -->
<table> ... etc ... </table>
</div>
旁注：我认为你可以在jQuery(".tableWrapper").on('click', '.heading', function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
中传递任何内容（无效），因为它是你需要的下一个兄弟姐妹中的第一个。我必须查看文档。