Question

好的，这个问题有点奇怪，很难解释所以我会试一试这个想法似乎很容易

单击div上的任意位置，div宽度从450到1400px隐藏页面上的另外两个div，并添加一个img点击以在右上角关闭它。完成。

现在点击img，div调整为450px，其他div返回并关闭img隐藏。完成。

我的问题是在我点击img之后。它调整大小然后返回到1400px并隐藏其他2个开始重新显示的div。我不希望它回到div点击事件。

这是jquery。

$(document).ready(function() {
 $(".close").hide();
 $("#leftdiv").click(function(){

  $("#leftdiv").animate({
   width: "1400px",
   height: "450px"
    },1000);
    $("#middlediv, #rightdiv").hide(500);
    $(".close").show(500);

$("#leftdiv").css({"-webkit-animation":"bounce 0s 0s"});

});

$("#leftdiv .close").click(function(){
    $("#leftdiv").stop().animate({
        width: "450px",
        height: "450px"
    },1000);
$(".close").hide();
       $("#middlediv, #rightdiv").show(500);
       });    
   });

我正在尝试学习jquery我之前只做了html css所以我试图将我的大脑包裹起来它很想知道如何做Jquery

Answer 1

您可能希望使用类似的内容，实际上在不需要时添加和删除点击处理程序。

$("#leftdiv").on('click', leftDivClickHandler);

function leftDivClickHandler(event)
{
    $("#leftdiv").off('click', leftDivClickHandler);

    $("#leftdiv").animate({
        width: "1400px",
        height: "450px"
    },1000, function() {
        $("#leftdiv .close").on('click', closeDiv);
    });
    $("#middlediv, #rightdiv").hide(500);
    $(".close").show(500);

    $("#leftdiv").css({"-webkit-animation":"bounce 0s 0s"});

  });
  event.preventDefault();
}

function closeDiv(event) 
{
    $("#leftdiv .close").off('click', closeDiv);

    $("#leftdiv").stop().animate({
        width: "450px",
        height: "450px"
    },1000, function() {
         $("#leftdiv").on('click', leftDivClickHandler);
    });

    $(".close").hide();
    $("#middlediv, #rightdiv").show(500);

    event.preventDefault();
}

交互式div大小

1 个答案: