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

我创建了一个简单的菜单，其中有一个按钮，当点击该按钮时，菜单的大小会以交替的高度变化，我不断收到一些奇怪的动作，其中我的菜单会缩小到文档的左下角，然后消失，然后重新出现相同的高度；这就是为什么我发现第二个函数正在执行，而不是第一个。我已经更改了很多次代码，但我找不到解决方案，也许有人可以帮我。这是我的密码

$(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);
            });
        });
    });
});

---

也许我只是不明白，我对这一点相当陌生，所以如果我做错了什么，请纠正我。

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

代码：

CSS:

---

原因是当使用多个参数调用.toggle时，第一个参数应该是一个字符串或数字，用于确定动画将运行多长时间，最后一个参数是动画完成后要调用的函数，请参见。这就是为什么您传入的第一个函数没有执行，而第二个函数没有执行的原因

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

CSS:

Javascript:

---

在JSFIDLE上提供复制您的问题的极简示例。在交替高度上更改菜单的大小是什么意思？请参见此处。。。您可以使用.toggleClassclosed；与您使用hasClass和if elsealso所做的不同，我认为您没有完全遵循jQuery API，“editor”不是jQuery包装的选择器，也不是有效的选择器。谢谢，这更有意义！

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

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

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

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