Question

问题
当我使用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（）不起作用。

Answer 1

如果这是你想要的，我不会使用.slideToggle：

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

可能是你在问什么？

Answer 2

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

请参阅http://api.jquery.com/toggle-event/

jQuery - 在点击功能之间切换

2 个答案: