Question

我的目标是在用户看到它之后更快地运行。要解释一下，一旦用户点击菜单按钮它就会打开，这很好但是当用户点击关闭菜单时，它应该更快地关闭菜单。但是我的代码不想触发我的代码中的第二个'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不在那里，但你可以得到这个想法，链接打开但我希望它们同时关闭！ - 最终结果可能甚至没有切换关闭但只是淡出！

Answer 1

问题是您的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);
        }
    });
});

Answer 2

您只需要更改选项。

e.g。

$( "#effect" ).effect( selectedEffect, options, 500, callback );

http://jqueryui.com/effect/

当某些东西可见时，更快地运行切换命令？

2 个答案: