javascript - 切换方法中未触发步骤选项

Question

我试图创建一个滑动菜单，使用 toggle() 方法但需要在滑入 View 时调用一个函数(与 div 高度交互)。为此，我使用了 step 选项(如文档中所示)来调用此函数，很快就会开始滑动。我做了很多测试，似乎这个选项不适用于 toggle()。

我已经尝试在同一个调用中使用 animate() 并且它工作得很好......？

我在这里做了一个简单的 fiddle (JSFiddle) 来说明这个问题。

我在最新版本的 IE 和 Chrome 中用 1.11.0 版的 jQuery 试过了

// This is for toggle method
$(document).on("click", "#toggle", function(){
  $("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
      if ($("#menu").hasClass("open")){       //***** THIS IS NEVER EXECUTED
        $("#menu").removeClass("open");  
        $(this).css("background-color", "red");
      } else{
        $("#menu").addClass("open");  
        $("#menu").css("background-color", "green");
      }
    }
  }) ;       
});

Answer 1

您在 fiddle 中的代码未正确包含在括号中(步骤在另外一对 {} 中)；因此该选项未正确传递给切换功能。

代码:

// This is for toggle method
$(document).on("click", "#toggle", function(){
  $("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
      if ($("#menu").hasClass("open")){       //***** THIS IS NEVER EXECUTED
        $("#menu").removeClass("open");  
        $(this).css("background-color", "red");
      } else{
        $("#menu").addClass("open");  
        $("#menu").css("background-color", "green");
      }
    }
  }) ;       
});

演示:http://jsfiddle.net/IrvinDominin/QzyEU/