javascript - 动画不起作用后 JQuery 单击

Question

当我第一次单击 #menuIcon div 时，我希望它为 #menu div left: 0em 制作动画，然后当我单击时第二次将 #menu 动画到 left: -12em。

第一部分有效，但是当我再次单击时什么也没有发生。 #menuIcon 是 #menu 的子级，这会影响什么吗？

这是我的 JS(改编自 this 问题，微查询插件答案):

$(document).ready(function(){

    jQuery.fn.clickToggle = function(a,b) {
        function cb(){
            [b,a][this._tog^=1].call(this);
        }
        return this.on("click", cb);
    };

    $("#menuIcon").clickToggle(function() {   
        $("#menu").animate({left: "0em"}, 500);
    }, function() {
        $("#menu").animate({left: "-12em"}, 500);
    });
});

提前致谢。

根据 John S 的建议，这是相关的(我认为)html:

<div id="menu">

    <div id="menuIcon">
        <div id="menuIcon1"></div>
        <div id="menuIcon2"></div>
        <div id="menuIcon3"></div>
    </div>

</div>

和CSS:

#menu {
    width: 16em;
    height: calc(100% - 5em);
    background-color: blue;
    position: fixed;
    bottom: 0;
    left: -12em;
}

#menuIcon {
    height: 4em;
    width: 4em;
    position: relative;
    top: 0;
    left: 12em;
    background-color: green;
}

Answer 1

只需使用添加的类来切换方向可能会更容易:

$("#menuIcon").on("click", function() {  
     $this = $(this)

     if(!$this.hasClass("open"))
     {
         $("#menu").animate({left: "0em"}, 500);
         $this.addClass("open");
     }
     else
     {
        $("#menu").animate({left: "-12em"}, 500);
        $this.removeClass("open");
     }
 })

这并不像你尝试的那么聪明，但我认为它更容易阅读，并且应该有效