使用jQuery slideToggle一组Table Rows
我是javaScript和jQuery的新手，所以希望这将是一个快速解决方案。 我需要显示一个包含数据的表格，这些数据可以分为几个类别，我想实现一个slideToggle，它隐藏/显示每个给定类别中的所有观察结果。
下面的代码应该（理想情况下）显示一个包含4列和9行的表，每组3行，前面是绿色的“Section i”行。 我希望每个Section标头都可以作为一个slideToggle来扩展或折叠它下面的所有行。 现在，没有任何东西在崩溃。 有什么想法吗？
td{padding:5px;} $(document).ready(function(){ $(".flip").click(function(){ $(this).next(".section").slideToggle(); }); });
Column1 Column2 Column3 Column4 Section 1 item 111 item 112 item 113 item 114 item 121 item 122 item 123 item 124 item 131 item 132 item 133 item 134 Section 2 item 211 item 212 item 213 item 214 item 221 item 222 item 223 item 224 item 231 item 232 item 233 item 234 Section 3 item 311 item 312 item 313 item 314 item 321 item 322 item 323 item 324 item 331 item 332 item 333 item 334
您不能将
s混合到
中，而是使用其他
元素。 在你的回调中， this是没有兄弟姐妹的
元素，所以.next没有任何用处; 你想回去，直到你得到与你感兴趣的.section深度相同的东西，然后从那里打电话.next 。
您的HTML看起来应该更像这样：
Column1 Column2 Column3 Column4 Section 1 item 111 item 112 item 113 item 114
你的点击处理程序如下：
$('.flip').click(function() { $(this) .closest('tbody') .next('.section') .toggle('fast'); });
.closest调用回到你的祖先，直到找到
，然后你打电话给.next 。
更新了jsfiddle： http ： //jsfiddle.net/ambiguous/Udxyb/4/