jquery – 当某些内容可见时更快地运行切换命令？

我的目标是一旦用户看到它就更快地运行.要解释一下,一旦用户点击菜单按钮它就会打开,这很好但是当用户点击关闭菜单时,它应该更快地关闭菜单.但是我的代码不想触发我的代码的第二个’else if’部分.

这是我的代码：

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

更新：

继承人@L_404_0@,css不在那里,但你可以得到这个想法,链接打开但我希望他们在同一时间关闭！ – 最终结果可能甚至没有切换关闭但只是淡出！

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