jqslidetoggle使用tbody没有效果

本文介绍了jQuery slideToggle在一个包含thead和tbody元素的表格上。没有动画。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张桌子，上面有一个thead和tbody部分。我已经成功应用了slideToggle，但动画已被破坏。

当用户点击thead时，我希望tbody的内容向上滑动。目前发生的情况是该部分简单消失，没有任何动画。

这是表格

<表> < thead> < tr> < td colspan =3> TABLE HEADING< / td> < / tr> < / thead> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table>

以下是我正在使用的jQuery：

< script type =text / javascriptlanguage =javascript> $（document）ready（function（）{ $（thead）。click（function（）{ $（this）next（tbody）。slideToggle slow）; } ）}）; < / script>

解决方案

由于<不管你用CSS设置它的高度，tbody> 通常不会比最高的 td 短。

这就是自然高度 tbody 似乎消失的原因，而具有人为额外高度的那个似乎运行到 tr 达到了它的自然高度。

你可以用 tbody {display：block;} 。 查看jsFiddle上的kludge。

但是，请注意设置表格高度时的效果。 p>

可能最好的办法是将整个表格封装在一个div和 slideToggle 中，如下所示：

< table class =AbbyNormal> < thead>< tr>< td colspan =3> TABLE HEADING< / td>< / tr>< / thead> < / table> < div class =tableWrap> < table class =AbbyNormal> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table> < / div>

请确定并修正表格宽度。

在jsFiddle上查看它的行动。

I have a table with a thead and tbody sections I have applied a slideToggle on this successfully, but the animation is broken

When a user clicks on the thead, I want the contents of the tbody to slide up Currently what happens is the section simply disappears, without any animation

Here is the table

<table>

<thead>

<tr>

<td colspan="3">TABLE HEADING</td>

</tr>

</thead>

<tbody>

<tr>

<td class="first" colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

</tr>

</tbody>

</table>

And here is the jQuery I am using:

<script type="text/javascript" language="javascript">

$(document)ready(function () {

$("thead")click(function () {

$(this)next("tbody")slideToggle("slow");

}

)

});

</script>

解决方案

It disappears because <tbody> normally will get no shorter than the tallest td, no matter what you set its height to with CSS

This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height

You can kludge around this with tbody {display:block;} See the kludge at jsFiddle

But, notice the effect that has when a table height is set

Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:

<table class="AbbyNormal">

<thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>

</table>

<div class="tableWrap">

<table class="AbbyNormal">

<tbody>

<tr>

<td class="first" colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

</tr>

</tbody>

</table>

</div>

Just be sure and fix the table widths the same

See it in action at jsFiddle

这篇关于jQuery slideToggle在一个包含thead和tbody元素的表格上。

$(function() {

    // 在id是main-wrap的元素中查找a或area，并且他们的href包括#

    $("#main-wrap")find('a[href=#],area[href=#]')click(function() {

        var reg = /^\\//;

        if (locationpathnamereplace(reg, '') == thispathnamereplace(reg, '')) {

            var $target = $(thishash);

            $target = $targetlength && $target || $('[name=' + thishashslice(1) + ']');

            if ($targetlength) {

                var targetOffset = $targetoffset()top - 55;

                $('html,body')animate({

                    scrollTop: targetOffset

                }, 1000);

                return false;

            }

        }

    });

})

以上就是关于jqslidetoggle使用tbody没有效果全部的内容，包括:jqslidetoggle使用tbody没有效果、如何让jQuery锚点链接只在指定id区域内的a标签中生效、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！