0

我为我的 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>

回复 2010 年 7 月 11 日下午 3:12:20

这是放置在页脚文件中的内容：

<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>
4

2 回答 2

0

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

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

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

ETC...

从那里您可以将您最喜欢的显示隐藏动画分配给我标记为“显示隐藏”的表格单元格。

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

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

希望这可以帮助。

为了完全符合 xhtml，我会使用“dl”而不是“table”。

于 2010-07-12T21:42:59.113 回答
0

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

为了使其工作，您必须将该行分解到它自己的表中。然后，为了最广泛的兼容性，您可以将必须​​隐藏的表格放在 a<div>中，并在 div 上执行溢出/动画。

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

table-layout: fixed在任何情况下通常都是首选，因为它比默认的“自动”表格布局算法更快、更可预测的跨浏览器。

于 2010-07-12T21:58:53.460 回答