如何從一個按鈕切換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> 

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> 

有很多檢查方法，上面是一個示例。