jquery - 一键显示响应式菜单，而不是两次

Question

我想出了以下内容，以在单击 a 时显示（scrollDown）菜单，.menubutton并在单击菜单中的链接时再次隐藏（scrollUp）菜单：

var navi = $('#navigation').hide();

$('.menubutton').toggle(function() {
    navi.slideDown();
}, function() {
    navi.slideUp();
});

$('#navigation a').click(function() {
    navi.slideUp();
});

问题是，如果单击了菜单链接，则.menubutton必须单击两次才能再次显示（向下滚动）菜单。

知道这是为什么吗？我想.menubutton每次点击 1 次。

Answer 1

.menubutton处于切换状态。所以它调用一个函数，然后调用另一个函数，以此类推。而不是使用.toggle，尝试使用.slideToggle。

$('.menubutton').click(function() {
    navi.slideToggle();
});

Answer 2

您slideUp在单击导航元素时直接调用，因此切换仍处于下一次单击.menubutton时也会调用的状态。slideUp尝试调用.menubutton'sclick代替：

$('#navigation a').click(function() {
    $('.menubutton').click();
});