Javascript 如何从一个按钮切换div

我可以通过使用jquery 1.8版中的

.toggle（）

来执行此任务 但是我在我的网站上使用/jquery/3.2.1/，并且

.toggle（）

不能正常工作

在我的一页中，我在第一节中使用了这个

$(document).ready(function(){

$("#slideBtn").click( function(){
    $(".slide-div").animate({left : '0'},"slow");
    $(".slide-div").css({"top": "0","z-index": "9"});
    $("p").animate({fontSize: '100px'},2000);
    $("#slideBtn").fadeOut("slow");
    });
$(".closedBtn").click( function(){
    $(".slide-div").animate({left:'-820px'},"slow");
    $(".slide-div").css({"top": "0","z-index": "9"});
    $("p").animate({fontSize: '14px'}, "slow");
    $("#slideBtn").fadeIn("slow");

    });


    });

它可以正常工作，但当我必须通过单击与我的底部部分相同的按钮来完成相同的任务时，第一次单击它就可以正常工作，但是如果我多次单击它就不能正常工作，因此我对这段代码有问题，我需要这段代码的帮助谢谢

这是代码

$(document).ready(function(){
    $("#button").click(function(){
        $(".new-box").animate({left : '0'},"slow");
    });
    $("#button").click(function(){
        var left = $(".new-box").css('left');
        if(left == '-820'){
            $(".new-box").animate({left : '0'},"slow" );
            }
            else {$("#button").on("click",function(){ $(".new-box").animate({left : '-820px'},"slow");});}

    });


    });

以下是示例

$（文档）.ready（函数（）{
$（“#slideBtn”）。单击（函数（）{
$（“.slide div”）.animate({
左：“0”
}“慢”）；
$（“.slide div”）.css({
“顶部”：“0”，
“z指数”：“9”
});
$（“p”）。动画({
字体大小：“100px”
}, 2000);
$（“#slideBtn”）。淡出（“慢”）；
});
$（“.closedBtn”）。单击（函数（）{
$（“.slide div”）.animate({
左：'-820px'
}“慢”）；
$（“.slide div”）.css({
“顶部”：“0”，
“z指数”：“9”
});
$（“p”）。动画({
字体大小：“14px”
}“慢”）；
$（“#slideBtn”）.fadeIn（“慢”）；
});
});
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“.new box”）.animate({
左：“0”
}“慢”）；
});
$（“#按钮”）。单击（函数（）{
var left=$（“.new box”）.css（'left'）；
如果（左=='-820'）{
$（“.new box”）.animate({
左：“0”
}“慢”）；
}否则{
$（“#按钮”）。在（“单击”，函数（）{
$（“.new box”）.animate({
左：'-820px'
}“慢”）；
});
}
});
});

玩
X
您好

嘘
当您调用
$（“选择器”）时。单击（..
两次，就像您所做的一样，您正在分配两个单击处理程序-因此两个处理程序同时运行（两个处理程序都在一次单击中运行）

您需要检查单击按钮内的状态，例如：

var isshown = false;


var isshown=true；
$（“#btn”）。单击（函数（）{
如果（isshown）{
//在这里制作动画，以简单的隐藏/显示为例
$（“#内容”）.hide（）；
}否则{
$（“#内容”）.show（）；
} 
isshown=！isshown；
})；

内容
单击
如果您对代码使用了调试器，您会看到
left
从
css
返回，上面有一个单位值（例如，
-810px
，而不是
-810
）。您还连接了
click
处理程序中的
click
处理程序，这几乎不是一个好主意

我根本不会依赖于
css
的返回值；相反，我会使用一个flag类（可能用css制作动画，但这超出了范围）：

在这里，我首先向元素添加了一个类，然后将其用作在单击发生时执行操作的标志

实时复制：


$（文档）.ready（函数（）{
$（“#slideBtn”）。单击（函数（）{
$（“.slide div”）.animate({
左：“0”
}“慢”）；
$（“.slide div”）.css({
“顶部”：“0”，
“z指数”：“9”
});
$（“p”）。动画({
字体大小：“100px”
}, 2000);
$（“#slideBtn”）。淡出（“慢”）；
});
$（“.closedBtn”）。单击（函数（）{
$（“.slide div”）.animate({
左：'-820px'
}“慢”）；
$（“.slide div”）.css({
“顶部”：“0”，
“z指数”：“9”
});
$（“p”）。动画({
字体大小：“14px”
}“慢”）；
$（“#slideBtn”）.fadeIn（“慢”）；
});
});
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“.new box”）.animate({
左：“0”
}“慢”）；
});
$（“#按钮”）。单击（函数（）{
var left=$（“.new box”）.css（'left'）；
if（$（“.new box”）.hasClass（'在左侧'））{
$（“.new box”）.removeClass（'在左侧'）.animate({
左：“0”
}“慢”）；
}否则{
$（“.new box”）.addClass（'在左侧'）。动画({
左：'-820px'
}“慢”）；
}
});
})；

玩
X
您好

嘘
到底什么不起作用？注意：无需使用
$（document）.ready（function（）{
两次。如果您打开代码段或小提琴，您可以看到底部按钮第一次工作正常，但当您反复单击它时，它不会像第一次那样工作“我可以使用.toggle（）执行此任务”在jquery的1.8版中，但我在我的网站上使用/jquery/3.2.1/，并且.toggle（）无法正常工作“在您的代码中并没有对
切换的调用。您对
现在做什么是什么意思？
@freedomn mStill second按钮操作不正确。请尝试关闭。@Mr.x:我做了。它是…@T.J.Crowder切换工作正常，但当您想关闭second
animaton
时，它不起作用。@Mr.x:对不起，我还没跟上g你。如果我点击“shw”按钮，它会向右滑动并显示。如果我再次点击“shw”按钮，它会向左滑动而不显示。OP似乎也认为它起作用了。（我没有看过它的其他部分，如果有其他不相关的东西不起作用。）是的，你提到的很好，但是当你点击
shw
时，如果你想通过右边的“close”（或那个空圆圈）关闭它，它不会关闭它。但是如果它不是OP问题的一部分，那就忘了它。
$(document).ready(function() {
  $("#button").click(function() {
    $(".new-box").animate({
      left: '0'
    }, "slow");
  });
  $("#button").click(function() {
    var left = $(".new-box").css('left');
    if ($(".new-box").hasClass('on-left')) {
      $(".new-box").removeClass('on-left').animate({
        left: '0'
      }, "slow");
    } else {
      $(".new-box").addClass('on-left').animate({
        left: '-820px'
      }, "slow");
    }
  });
});