Question

当我第一次点击#menuIcon div时，我希望它为#menu div left: 0em设置动画，然后当我第二次点击它时，将#menu设为{{}} { {1}}。

第一部分有效但当我再次点击时没有任何反应。 left: -12em是#menuIcon的孩子，这会影响到什么吗？

这是我的JS（改编自this问题，微查询插件答案）：

#menu

提前致谢。

正如John S所说，这是相关的（我认为）html：

$(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);
    });
});

和css：

<div id="menu">

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

</div>

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

这并不像你想要的那样聪明，但我觉得它更容易阅读，而且应该有效

Answer 2

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

使用Jquery切换功能，将为您带来魔力。感谢

Answer 3

正如John S所说，我的问题不在于jQuery，而在于我的其他HTML。

我打开时有一个重叠#menu的div。我将#menu的z-index设置为2并且有效。

动画不工作后JQuery点击

3 个答案: