Question

的jsfiddle： http://jsfiddle.net/tahirjadoon/v6FY7/

我在上面的链接中设置了一个示例。我的要求是一张桌子。在tr上，它有一个混蛋，并且在tr扩展之后，它们也是在所有浏览器上的反弹。我怎样才能让它变得更好？

HTML

<table class="table-grid">
    <tr>
        <td><a href="" id="item1" class="expandCollapse collapse">Expand 1</a></td>
        <td>100</td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <tr>
                    <td> 1 - 1</td>
                </tr>
                <tr>
                    <td> 1 - 2</td>
                </tr>
                <tr>
                    <td> 1 - 3</td>
                </tr>
                <tr>
                    <td> 1 - 4</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td><a href="" id="item2" class="expandCollapse collapse">Expand 2</a></td>
        <td>200</td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <tr>
                    <td> 1 - 1</td>
                </tr>
                <tr>
                    <td> 1 - 2</td>
                </tr>
                <tr>
                    <td> 1 - 3</td>
                </tr>
                <tr>
                    <td> 1 - 4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

.table-grid {width:85%;border: 0; margin:0 0 20px 1px;border-collapse:collapse;}
.table-grid td {border: 1px solid #c3d9ee;padding:.3em 1.1em;}
.table-grid td, .table-grid td a.expand, .table-grid td a.collapse {color:#000; text-align:left;font: bold 1em Verdana, Arial, Helvetica, sans-serif; }
.table-grid td a.expand { text-decoration: none; padding-left: 20px; color: red;  }
.table-grid td a.collapse { text-decoration: none; padding-left: 20px; color: green;  }
.table-grid td a.expand:hover, .table-grid td a.collapse:hover { text-decoration: underline; }

JS

$(document).ready(function () {

        $(".expandCollapse").closest("tr").next("tr").toggle();

        $(".expandCollapse").click(function(){
            if ($(this).closest("tr").next("tr").is(':visible')) {
                $(this).removeClass("expand").addClass("collapse");
            }
            else{
                $(this).removeClass("collapse").addClass("expand");
            }
            $(this).closest("tr").next("tr").slideToggle("slow");
            return false;
        });
    });

转换为div时，上下滑动很慢，没有抖动/反弹。

Div示例： http://jsfiddle.net/tahirjadoon/DuHN8/

HTML

<h2 class="triggerMax" id="Item1">
    <a href="#">Item # 1</a>
</h2>
<div class="toggle_containerMax">
    <div class="block">
        <p>Text for item 1</p>
        <p>Text for item 1</p>
        <p>Text for item 1</p>
        <p>Text for item 1</p>
        <p>Text for item 1</p>
    </div>
</div>
<h2 class="triggerMax" id="Item2">
    <a href="#">Item # 2</a>
</h2>
<div class="toggle_containerMax">
    <div class="block">
        <p>Text for item 2</p>
        <p>Text for item 2</p>
        <p>Text for item 2</p>
        <p>Text for item 2</p>
        <p>Text for item 2</p>
    </div>
</div>

CSS

.toggleContainerMax { width: 300px; text-align: left; font-family:Arial;font-size: 9pt; }
h2.triggerMax {
    padding: 0px; margin: 0px 0px 5px 0px; height: 46px; line-height: 46px;  font-size: 15px; font-weight: normal; cursor: pointer;
    text-indent:0px; /*this to tackle common h2 style interfering with toggle*/
}
h2.triggerMax a { padding-left:40px; color: #000; text-decoration: none; display: block; }
h2.triggerMax a:active { outline: none; /* hide dotted outline in fire fox*/}
h2.triggerMax a:hover { text-decoration: underline; }
.toggle_containerMax .block {
    padding: 15px 20px 10px 20px; /*--Padding of Container--*/
    position: relative;
}
h2.activeMax { background-color: yellow; }

JS

$(document).ready(function () {
    $(".toggle_containerMax").hide();

    $("h2.triggerMax").toggle(function () {
        $(this).addClass("activeMax");
    }, function () {
        $(this).removeClass("activeMax");
    });

    $("h2.triggerMax").click(function () {
        $(this).next(".toggle_containerMax").slideToggle("slow");
    });

});

Answer 1

默认情况下，TR的显示设置为table-row，将其更改为display-block允许动画高度：

tr{display:block}

http://jsfiddle.net/v6FY7/4/

Answer 2

不确定为什么会这样，但升级到jquery 1.9.1似乎可以解决问题：

http://jsfiddle.net/v6FY7/2/

这可能与slideToggle无法与tr元素真正起作用的事实有关。如果您必须使用toggle，则应该将其更改为tr。

切换下一个TR

2 个答案: