jquery - 可见内容时更快地运行切换命令？

我的目标是在用户看到内容后尽快运行它。解释一下，一旦用户单击菜单按钮，它将打开，这很好，但是当用户单击以关闭菜单时，它应该可以更快地关闭菜单。但是，我的代码不想触发代码的第二个“ else if”部分。

这是我的代码：

  $(document).ready( function() {
   if ( !$(".TopList1").is(":visible")  ) {
    $('.MenuButton').click(function() {
        $( ".TopList1" ).toggle("slide", {direction: "down"}, 1000);
        $( ".TopList2" ).delay(800).toggle("slide", {direction: "down"}, 800);
        $( ".LeftList1" ).toggle("slide", {direction: "left"}, 1000);
        $( ".LeftList2" ).delay(800).toggle("slide", {direction: "left"}, 1000);
    });
   } else if ( $(".TopList1").is(":visible")  )  {
    $('.MenuButton').click(function() {
        $( ".TopList1" ).toggle("slide", {direction: "down"}, 800);
        $( ".TopList2" ).toggle("slide", {direction: "down"}, 800);
        $( ".LeftList1" ).toggle("slide", {direction: "left"}, 800);
        $( ".LeftList2" ).toggle("slide", {direction: "left"}, 800);
    });
   }
});

更新：

这是jsFiddle link，css不在此处，但是您可以理解，链接可以打开，但是我希望它们同时关闭！ -最终结果可能甚至无法切换收盘价，而是淡出！

最佳答案

问题是您的if语句仅在初始加载时被检查。当评估为true时，仅触发了代码的前半部分。它完全起作用的原因是因为toggle很聪明，所以上半部分既扩展又折叠了子菜单。

此代码有效：

$(document).ready( function() {
    var menuClosed = true;
    $('.MenuButton').click(function() {
        if (menuClosed) {
            menuClosed = false;
            $( ".TopList1" ).toggle("slide", {direction: "down"}, 1000);
            $( ".TopList2" ).delay(800).toggle("slide", {direction: "down"}, 800);
            $( ".LeftList1" ).toggle("slide", {direction: "left"}, 1000);
            $( ".LeftList2" ).delay(800).toggle("slide", {direction: "left"}, 1000);
        } else {
            menuClosed = true;
            $( ".TopList1" ).toggle(0);
            $( ".TopList2" ).toggle(0);
            $( ".LeftList1" ).toggle(0);
            $( ".LeftList2" ).toggle(0);
        }
    });
});