jQuery SlideToggle() 带有嵌套表的表行
我目前在带有嵌套表的表行上使用 SlideToggle() jQuery 效果时遇到问题。
我有以下 HTML 标记:
<table>
<tbody>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr class="show-details">
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr class="details">
<td colspan="3">
<table>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Ipsum Lorem</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="show-details">
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr class="details">
<td colspan="3">
<table>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Ipsum Lorem</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
我想立即隐藏详细信息行并使用 slipToggle() 函数显示它。我有以下 jQuery 代码:
$(function() {
$(".details").hide();
$('.show-details').click(function(e){
$(this).next(".details").slideToggle(500);
$("td > span", this).toggleClass('open')
});
});
问题是该行来自 display:none;显示:表格行;这会导致 display:none;
到 display:block;
到 display:table-row;
。然后效果跳转到显示块,然后对行的高度进行动画处理(+ 使其溢出大量,因此下一行会向下跳几秒),最后变成 display:table-row;< /code> 当动画结束时。
有什么建议可以使用简单的 SlideToggle 来显示 .detail
行吗?
我已经尝试过这个中的答案问题没有任何运气。
I currently have a problem with the slideToggle() jQuery effect on a table row with a nested table.
I have the following HTML markup:
<table>
<tbody>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr class="show-details">
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr class="details">
<td colspan="3">
<table>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Ipsum Lorem</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="show-details">
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr class="details">
<td colspan="3">
<table>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Ipsum Lorem</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want to hide the detail row right away and show it with the slideToggle() function. I have the following jQuery code:
$(function() {
$(".details").hide();
$('.show-details').click(function(e){
$(this).next(".details").slideToggle(500);
$("td > span", this).toggleClass('open')
});
});
The problem is that the row goes from display:none; to display:table-row; which results in a display:none;
to display:block;
to display:table-row;
. The effect then jumps to display block, then animates the height of the row (+ overflow it by a ton, so the next row jumps down for a few secs) and then at last turn into display:table-row;
when the animation is over.
Any suggestions to get the effect working with a simple slideToggle to display the .detail
row?
I've tried the answers in this question without any luck.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(4)
实际上有一种方法可以通过嵌套表获得相同的效果 - 你一开始就走在正确的轨道上,但你的 jQuery 是错误的。借助 Gravity 的 jQuery,我能够简单地将类分配给相应的表行,并且一切都工作得很好。
HTML
<table>
<thead>
<tr>
<th>Month</th>
<th>From Date</th>
<th>To Date</th>
<th>Execution Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="row show-details odd">
<td>4-APR</td>
<td>TExt</td>
<td> </td>
<td>05/06/2011</td>
<td>Done</td>
</tr>
<tr class="row details">
<td colspan="5">
<table>
<thead>
<tr>
<th>File Name</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Aetna XLS</td>
<td>05/06/2011</td>
</tr>
<tr class="even">
<td>XLS</td>
<td>05/06/2011</td>
</tr>
<tr class="odd">
<td>XLS</td>
<td>05/06/2011</td>
</tr>
</tbody>
</table>
CSS
.cell {
display: inline-block;
}
.head {
font-weight: bold;
}
.head .cell, .row .cell {
width: 100%;
}
.details .cell {
width: 100%;
}
jQuery
<script>
$(function() {
$(".details").hide();
$('.show-details').click(function(e) {
$(this).next(".details").fadeToggle(500);
// $("td > span", this).toggleClass('open')
});
});
</script>
这样,我就不必重做所有 CSS、表格结构,甚至根本不需要修改我的表格。我刚刚将课程分配给 TR,瞧!
真正尝试使用 styled divs 答案。否则,我可以使用 fadeToggle(500) 获得更好的跨浏览器一致性,以便在 IE 中隐藏和显示表行。同样,您仍然需要确认 fadeToggle 的行为是可以接受的。
$(function() {
//seriously consider styling these as display:hidden on load
$(".details").hide();
$('.show-details').click(function(e){
$(this).next(".details").fadeToggle(500);
$("td > span", this).toggleClass('open')
});
});
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我认为这是表细胞固有的功能障碍。解决方案是将它们替换为样式化的 DIV:
http://jsfiddle.net/mblase75/mv7Y5/1/
I think this is an inherent dysfunction with table cells. The solution is to replace them with styled DIVs:
http://jsfiddle.net/mblase75/mv7Y5/1/