1

问题
当使用 jQuery 的 .toggle() 方法单击按钮时，我试图在两个函数之间切换，但是一旦 DOM 准备好，按钮本身就会消失。

代码

$(document).ready(function() {

    $("#panel").css({"height": "0%", "bottom": "0"});

/*
    var already_clicked = false;
    $("button").on("click", function() {
        if (already_clicked) {
            $("#panel").animate({"height": "0%"}, 500);
            already_clicked = false;
        } else {
            $("#panel").animate({"height": "100%"}, 500);
            already_clicked = true;
        }
    });
*/

    $("button").toggle(function() {
        $("#panel").animate({"height": "100%"}, 500);
    }, function() {
        $("#panel").animate({"height": "0%"}, 500);
    });

});

标记

<body>
    <div id="panel"></div>
    <button>Click me</button>
</body>

注意：注释块中的解决方案按预期工作，但我不确定为什么 .toggle() 不起作用。

4

2 回答 2

5

如果这是您想要的，我不使用，但是.slideToggle：

$("button").click(function() {
    $("#panel").slideToggle(500);
});

可能是你要问的？

于 2013-01-24T08:57:58.467 回答
2

如果您使用的是 jQuery 1.9，那么.toggle就不会那样工作 - 将两个函数作为参数的版本在 1.8 中已被弃用并在 1.9 中被删除

见http://api.jquery.com/toggle-event/

于 2013-01-24T08:58:17.510 回答