表行中的slideToggle
slideToggle与表一起工作吗？
我想滑动一排桌子。 但它只是显示没有任何影响。
SlideToggle确实可以处理表格行，它只是一种吸引。
如果你有一个高度大于最小值的表格行，像这样
<tr height="30%"> 然后，滑动滑块将顺利滑动，直到达到最小高度，然后像使用的那样立即消失
$("#tr").hide();
我已经做了一个jsfiddle在http://jsfiddle.net/BU28E/1/
更好的解决scheme可能是使用divs制成的表格。 Divs会很顺利地上升。 我做了另一个jsfiddle在http://jsfiddle.net/BU28E/2/
我所做的是在行中放置一个DIV，并将TR和TD的填充设置为零。 然后我可以滑动切换div而不是行：
<table> <tr style="padding: 0"> <td style="padding: 0"> <div id="slideme" style="display: none"> </td> </tr> </table> $("#slideme").slideToggle();
很好用。 我想你可以在每一列中放一个DIV，如果你需要的话可以同时滑动切换。
我不知道这个解决方法是否被认真和有效的方式，但它对我有效：
假设你想要滑动表格的第一行（这段代码将滑过页眉）：
$('table tr').first().children().slideUp();
所以，基本上，你想滑动行的孩子，而不是行本身:)
我想出了一个解决方法，不能幻灯片行的问题。 此代码仅适用于表格内容完全是文本的情况。 这可以通过一些工作来调整以支持其他事物（图像等）。 这个想法是，行将只收缩，直到达到其内容的大小。 因此，如果您可以在需要时缩小内容，幻灯片将继续。
http://jsfiddle.net/BU28E/622/
$("button").click(function(){ $('#1').slideUp({ duration: 1500, step: function(){ var $this = $(this); var fontSize = parseInt($this.css("font-size"), 10); // if the real and css heights differ, decrease the font size until they match while(!sameHeight(this) && fontSize > 0){ $this.css("font-size", --fontSize); } } }); }); function sameHeight(el){ var cssHeight = el.style.height; cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2)); var realHeight = $(el).innerHeight(); return isNaN(cssHeight) || realHeight - cssHeight < 2; }
效果略有不同，因为内容收缩而不是正常的滑动效果。
最后一行的< 2可能需要根据您的边界（可能还有其他因素）进行调整。 而且，这只能说明隐藏内容。 需要类似的方法来允许字体大小随着行向下滑动而增长。 这更多的是一个概念的certificate。
编辑：乔纳坦的答案后，他的方法看起来相当干净。
在这里，我有一个类view-converters的表行，单击时，将显示/隐藏类TCConverters所有div。
我的行看起来像这样：
<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr> <tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr> <tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr> <tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>
这是您点击view-converters时运行的代码。
我没有做任何特殊的表格单元格的填充。
请注意，当我们完成幻灯片的animation时，我们隐藏表格行。
$(".view-converters").click(function() { if(!$(".TCConverters:first").is(":visible")) { $(".TCConverters").parent().parent().show(); } $(".TCConverters").slideToggle(200,function() { if(!$(this).is(":visible")) { $(this).parent().parent().hide(); } }); });
它看起来像这样：
原版的：
在这里，我有一个类view-converters的表行，单击时，将显示/隐藏类TCConverters所有行：
您可以通过更改每个.each的hacky初始值和增量来调整速度。
这不会像滑动切换那样很好地拉伸行，但效果对我的目的起作用。
如果你真的想挤压行高，你可能只需要用一个setTimeoutreplaceparam.hide()来缩小高度，直到它达到0为止。
$(".view-converters").click(function() { var hacky = 50; if($('.TCConverters:first').is(':visible')) { $('.TCConverters').each(function() { var param = $(this); setTimeout(function() { param.hide(); },hacky); hacky += 5; }); } else { $($('.TCConverters').get().reverse()).each(function() { var param = $(this); setTimeout(function() { param.show(); },hacky); hacky += 5; }); } });
它看起来像这样：
尝试使用
$("#tr").fadeToggle(1000)
类似的效果
您可以在表格中滑动一行的切换。 请试试这个
表格的Html代码：
<a href="#" >ok</a> <table id="tbl"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>6</td><td>5</td></tr> </table>
jQuery代码在这里点击“a”href，表格将被切换。
$(document).ready(function() { $("a").click(function() { $('table tr td').slideToggle("medium"); }); });
对于特定的索引行，可以使用$('table tr:eq(rowindex) td') 。
