Javascript 在切换方法中未激发步骤选项

我试图创建一个滑动菜单，使用切换方法，但需要调用一个函数，该函数在滑入视图时与div height交互。为此，我使用了文档中的step选项来调用这个函数，很快就开始出现滑动。我做了很多测试，这个选项似乎不适用于切换

我试着用相同的调用使用动画，它工作得很好

我在这里做了一个简单的提琴来说明这个问题

我在IE和Chrome的最后一个版本中使用了jQuery的1.11.0版

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

---

小提琴中的代码没有正确地包含在帕伦斯步骤中，而是在另两个{}中；因此，选项未正确传递给切换函数

代码：

---

演示：

因此，在每个步骤中，菜单都会打开或删除类。显然，在动画结束之前，最后一步将删除open Classis。我知道这不是使用此步骤功能的明显方式，但这段代码只是为了证明它没有被调用。我使用了您对我的代码的更正，并且它在独立页面中工作得非常好，谢谢。我发表这个问题的原因是因为我需要在一个更大的项目中使用相同的行为，我需要使用从右到左的切换来显示一个FAQ页面，并使用step功能来调整div相对于其父级的高度。。。正如我所说，您的代码在一个独立的页面中工作得非常好，但是当我使用相同的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");
      }
    }
  }) ;       
});