Question

我已经使用动画折叠为我的div滑块没有任何缺陷。但是，我现在需要使用表格行滑块，它根本不执行相同的操作。这是我正在使用的表格的一部分，所以你有了一个想法。

<table>

回复帖子......

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

            $(document).ready(function () {
                var editor = CKEDITOR.replace( 'newsfeed_status7',
                           {
                                   toolbar :
                                   [
                                          ['Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'Undo', 'Redo', '-', 'MediaEmbed','Smiley', 'SpellChecker', 'Find','Replace']
                                   ],
                                   height: '50px'
                           });

            });

    </script>
        <table width="100%">
            <tr>
                <td align="left" width="25%" style="padding-left:15px;"></td>
                <td align="left" width="25%"></td>
                <td align="right"></td>

                <td align="right" width="20%" style="padding-right:15px;"><input type="submit" value="Reply To Post" class="submitbtn" /></td>
            </tr>
        </table>
    </td>
</tr>

答复 07/11/10 03:12:20 PM

以下是页脚文件中的内容：

<script type="text/javascript">
animatedcollapse.addDiv('tr7', 'fade=1') animatedcollapse.addDiv('tr6', 'fade=1') animatedcollapse.addDiv('tr4', 'fade=1') animatedcollapse.addDiv('tr2', 'fade=1') animatedcollapse.addDiv('tr1', 'fade=1') animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>

Answer 1

你可能不喜欢这个解决方案，因为它有点难看（假设你完全依赖于基于表格的布局）。

您需要在第一个表格单元格中嵌套另一个表格。像这样：

table
    tr
      td class="show-hide"
        table
            tr
                td
                td
                td

等...

从那里你可以将你喜欢的隐藏动画分配给我标记为“show-hide”的表格单元格。

或者更简单的应用是将行输出为div（而不是tr），然后输入一个表来实现你的结构。

动画在这些解决方案的任何一个版本中看起来都很不错，因为您需要为每个td分配定义的宽度，以便您可以维护所需的晶格结构。

希望这有帮助。

要完全符合xhtml标准，我会使用“dl”代替“table”。

Answer 2

假设animatedcollapse是一个动画，通过在元素上设置overflow: hidden然后更改其height来工作，我担心溢出根本不适用于表行的到期他们的不同/不寻常的布局模型（在大多数浏览器和大多数情况下，无论如何）。

为了使它工作，你必须将该行分成它自己的表。然后，为了获得最广泛的兼容性，您可以将必须隐藏的表放在<div>内，并在div上执行溢出/动画。

由于您现在有多个表（三个，如果在目标行之前和之后有先前的行），您需要确保它们的列对齐，以使它们看起来像一个表。这应该通过为表格提供样式table-layout: fixed; width: 100%;（然后在第一行中的单元格上使用width样式调整任何需要与其他列不同宽度的列来完成，或者使用一组{ {1}}元素）。

<col>在任何情况下都是首选，因为它比默认的“自动”表格布局算法更快，更可预测跨浏览器。

由于某种原因，无法显示/隐藏像div这样的表行

2 个答案: