5

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

4

2 回答 2

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);
        }
    });
});
于 2013-05-17T04:53:43.550 回答
0

您只需要更改选项。

例如

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

http://jqueryui.com/effect/

于 2013-05-15T12:18:42.360 回答