Question

如果您运行下面的代码段并单击一个展开，您将看到一个表的行被扩展（其内容就是这样）。再次单击展开时，表格的行将完全消失（这是所需的输出）。

但是，扩展全部存在问题。单击展开全部时，它们都会按预期展开。当再次点击它时，它们会崩溃（slideToggle'd看不见），除非它们不是真的。除最后一个表行外，所有表行都保留一个高度的像素。我不知道如何解决这个问题。表格单元格未正确设置为display:none。

如果您运行代码段，您可以看到我的意思。所需的输出将不具有表格单元格的剩余像素高度

var animationSpeed = 600;
$(".expand").css({
    "padding": "0em"
});
$(".expand").click(function () {
    expandTable($(this));
});
$(".expandAll").click(function () {
    $(".expand").each(function () {
        expandTable($(this));
    });
});

function expandTable($this) {
    $el = $(".slideDown[data-id='" + $this.data("id") + "']").children("td");
    if ($el.css("display") == "none") {
        $el.stop().css({
            "padding": 0
        }).show().animate({
            "padding": "0.5em"
        }, animationSpeed);
        $el.children("div").stop().slideDown({
            duration: animationSpeed
        });
        $this.find("span").html("Collapse");
        var set_baseHeight = setTimeout(function () {
            baseHeight = $("#content").height();
            //clearTimeout(set_baseHeight);
        }, animationSpeed);
    } else {
        $el.stop().animate({
            "padding": 0
        }, animationSpeed, function () {
            $el.hide();
        });
        $el.children("div").stop().slideToggle({
            duration: animationSpeed
        });
        $this.find("span").html("Expand");
        var set_baseHeight = setTimeout(function () {
            baseHeight = $("#content").height();
            $el.children("div").css({
                "display": "none"
            });
            $el.css({
                "display": "none"
            });
            //clearTimeout(set_baseHeight);
        }, animationSpeed);
    }
}

table th, table td {
    border:1px solid black;
}
.expand, .expandAll {
    text-align:center;
    padding:0.5em;
    cursor:pointer;
}
.expand, .expandAll {
    background-color:rgba(0, 100, 0, 0.3);
}
.expand:hover, .expandAll:hover {
    background-color:rgba(0, 200, 0, 0.4);
}
.slideDown>td {
    display:none;
    background-color:rgba(0, 0, 0, 0.2);
}
.slideDown>td>div {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
            <th>Fourth</th>
            <th class="expandAll">Expand all</th>
        </tr>
    </thead>
    <tbody>
        <tr class="slideDownHandler">
            <td>0</td>
            <td>25</td>
            <td>75</td>
            <td align="center">100</td>
            <td rowspan="2" class="expand" data-id="0"><span>Expand</span>

            </td>
        </tr>
        <tr class="slideDown" data-id="0">
            <td colspan="4">
                <div>
                    <table width="100%">
                        <thead>
                            <th>Thing 1</th>
                            <th>Stuff 1</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Stuff</td>
                                <td align="center">Content</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        <tr class="slideDownHandler">
            <td>0</td>
            <td>25</td>
            <td>75</td>
            <td align="center">100</td>
            <td rowspan="2" class="expand" data-id="1"><span>Expand</span>

            </td>
        </tr>
        <tr class="slideDown" data-id="1">
            <td colspan="4">
                <div>
                    <table width="100%">
                        <thead>
                            <th>Thing 2</th>
                            <th>Stuff 2</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Stuff</td>
                                <td align="center">Content</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

修复了回调而不是setTimouts

的问题

function expandTable($this) {
    $el = $(".slideDown[data-id='" + $this.data("id") + "']").children("td");
    if ($el.css("display") == "none") {
        $el.stop().css({
            "padding": 0
        }).show().animate({
            "padding": "0.5em"
        }, animationSpeed);
        $el.children("div").stop().slideDown({
            duration: animationSpeed,
            complete: function () {
                baseHeight = $("#content").height();
            }
        });
        $this.find("span").html("Collapse");
    } else {
        $el.children("div").stop().slideToggle({
            duration: animationSpeed
        });
        $el.stop().animate({
            "padding": 0
        }, {
            duration: animationSpeed,
            complete: function () {
                $(this).hide();
            }
        });
        $this.find("span").html("Expand");
    }
}

https://jsfiddle.net/cm7v2708/9/

jQuery slideToggle（）/ slideUp（）没有完全隐藏（1px高度仍然存在）

1 个答案: