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