Question

我正在尝试按下菜单按钮，从左侧打开和关闭侧边菜单。得到了css，html代码正常运行，但我无法弄清楚我对脚本做错了什么。它只能完美地工作一次：当我按下菜单按钮它出来时，再次按下它然后按照预期返回。问题是，如果我再次按它显示它，它会自动返回。谁能帮我？这是我的剧本：

$(document).ready(function(){

$('.menu-icon').click(function(){
    $('#navigator').animate({left:'0px'},200);
    $(this).animate({left:'250px'},200);
    $('.menu-icon').click(function(){
        >$('#navigator').animate({left:'-250px'},200);
        >$(this).animate({left:'0px'},200);
}); 
});
>});

Answer 1

您已在点击处理程序中放置了一个点击处理程序，因此它会多次运行。两次第一次，然后三次，然后四次等。

您需要拥有一个处理程序，并根据元素的当前状态决定如何为设置动画。例如如下所示（未经测试）：

$(document).ready(function () {

    $('.menu-icon').click(function () {
        if ($('#navigator').css("left") != "0px") {
            $('#navigator').animate({
                left: '0px'
            }, 200);
            $(this).animate({
                left: '250px'
            }, 200);
        } else {
            $('#navigator').animate({
                left: '-250px'
            }, 200); > $(this).animate({
                left: '0px'
            }, 200);
        }
    });
});

我建议使用您在元素上切换的类来测试“当前状态”，因为测试css值在动画期间是众所周知的不可靠。

e.g。类似的东西：

    if ($('#navigator').toggleClass("open").hasClass("open")) {

Answer 2

此处您将附加click事件侦听器两次。一个正常，一个点击后，这就是为什么它发生使用jquery切换

或以这种方式使用

$(document).ready(function(){

   $('.menu-icon').click(function(){
     var navigator = $('#navigator');
     if(navigator.offset().left == 0)
     {
        navigator.animate({left:'-250px'},200);
        $(this).animate({left:'0px'},200);
     }
     else
     {
        navigator.animate({left:'0px'},200);
        $(this).animate({left:'250px'},200);
     }

  });
});

脚本只运行一次

2 个答案: