Question

我可以在jquery的1.8版本中使用parpool('local',4);来执行此任务但我在我的网站上使用/jquery/3.2.1/并且.toggle()无法正常工作

在我的第一部分

中使用了我的一个页面

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

    });


    });

以下是示例

＆＃13;

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

    });


    });

＆＃13;

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

＆＃13;

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>

Answer 2

当您按照自己的方式拨打$("selector").click(..两次时，您将分配两个点击处理程序 - 因此两个点击处理程序同时运行（一次点击都运行）。

您需要检查点击按钮中的状态，例如：

var isshown = false;

var isshown = true;
$("#btn").click(function() {
    if (isshown) {
       // do your animates here, simple hide/show as example
       $("#content").hide();
    } else {
       $("#content").show();
    } 
    isshown = !isshown;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>content</div>
<button id='btn'>click</button>

有很多方法可以检查这个，上面是一个例子。

如何从一个按钮切换div

2 个答案: