javascript - 如何通过一个按钮切换 div

Question

我可以通过使用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");});}

    });


    });

这是示例

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

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
  <div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
    <button id="slideBtn">Play</button>
    <div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
      <p style="width:100%;">Hello</p>
    </div>
  </div>
  <div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
    <button id="button">shw</button>
    <div class="new-box" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>


</div>

<强> JSFiddle

Answer 1

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

我根本不会依赖 css 的返回值；相反，我会使用一个标志类(并且可能使用 CSS 进行动画，但这超出了范围):

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

我最初向该元素添加了一个类，然后将其用作单击发生时要执行的操作的标志。

实时复制:

$(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 ($(".new-box").hasClass('on-left')) {
      $(".new-box").removeClass('on-left').animate({
        left: '0'
      }, "slow");
    } else {
      $(".new-box").addClass('on-left').animate({
        left: '-820px'
      }, "slow");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
  <div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
    <button id="slideBtn">Play</button>
    <div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
      <p style="width:100%;">Hello</p>
    </div>
  </div>
  <div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
    <button id="button">shw</button>
    <div class="new-box on-left" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>


</div>