Question

我创建了一个带有按钮的简单菜单，当点击该按钮时，应该在交替高度处更改菜单的大小，我不断收到一些奇怪的操作，我的菜单缩小到文档的左下角消失然后重新出现相同的高度;这是我如何发现第二个功能正在执行但不是第一个。我已经多次更改了代码，但我无法找到解决方案，也许有人可以提供帮助。这是我的代码。

$(document).ready(function () {
    $("#HideShow").addClass("fa fa-bars").click(function () {
        $("#editor").toggle(function () {
            $("#editor").slideToggle("fast", function () {
                $("#editor").height(20);
            });
        }, function () {
            $("#editor").slideToggle("fast", function () {
                $("#editor").height(150);
            });
        });
    });
});

也许我只是没有得到它，我对此很新，所以如果我做错了请请纠正我。

Answer 1

我认为你并没有完全遵循jQuery API。如果我理解正确，您应该使用类打开和关闭菜单。然后，您可以使用简单的jQuery事件来切换类。像这样：

代码：

$('#HideShow').click(function() {
  $(this).toggleClass('closed');
});

CSS：

<style>
.closed {
  height: 20px;
}
</style>

Answer 2

原因是因为当使用多个参数调用.toggle()时，第一个参数应该是“确定动画将运行多长时间的字符串或数字”，以及最后一个“动画完成后调用的函数”（参见documentation）。这就是你传入的第一个函数没有执行的原因，而第二个函数是。

正如其他人已经提出的那样，获得你想要的东西的一种可能方式是：

<强> CSS：

#editor {
    height: 150px;
}
#editor.closed {
    height: 20px;
}

<强>使用Javascript：

$("#HideShow").click(function() {
    $("#editor").toggleClass('closed');
});

为什么.toggle不适用于第一个函数？

2 个答案: