Javascript jQuery-放大单击的div，如果再次单击，则返回到原始大小

HTML:

<div class="box">
     content
</div>
<div class="box last">
     content
</div>

$('.box').on('click', function (e) {
    e.preventDefault()
    $(this).stop(true, false).animate({
        width: "+=100",
        height: "+=100",
        top: "-=50",
        left: "-=50"
    }, 300);
    $(this).addClass('zoom')
});

若在另一个框上或在（文档体）外部某处单击，我需要将框的大小调整回原始状态（大小和位置）

我已尝试使用此代码，但只要单击其中一个框，代码就会执行：

$(document).on('click', ".box.zoom", function () {
    e.preventDefault()
    $(this).stop(true, false).animate({
        width: "-=100",
        height: "-=100",
        top: "+=50",
        left: "+=50"
    }, 300);
    $(this).removeClass('zoom')
});

---

当前设置位于：

在使用框的

data（）

方法单击事件保存当前位置的最后一步，然后单击恢复以前的位置，如下所示

$('.box').on('click', function () {
    var position = $(this).data('position'); //get saved position

    if ($(this).hasClass('zoom')) {
        $(this).stop(true, false).animate({
            width: "-=100",
            height: "-=100",
            top: position.top, //use saved position
            left: position.left //use saved position
        }, 300);
        $(this).removeClass('zoom');
    } else {
        $(this).stop(true, false).animate({
            width: "+=100",
            height: "+=100",
            top: "-=50",
            left: "-=50"
        }, 300);
        $(this).addClass('zoom')
    }

    $(this).data('position', $(this).offset());
});

---

嗨，我希望这对你有帮助

Javascript

$('.box').on('click', function (e) {
    e.preventDefault()
    if ($(this).hasClass('zoom')) {
        $(this).stop(true, false).animate({
            width: "-=100",
            height: "-=100",
            top: "+=50",
            left: "+=50"
        }, 300);
        $(this).removeClass('zoom');
    }
    else {
        $(this).stop(true, false).animate({
            width: "+=100",
            height: "+=100",
            top: "-=50",
            left: "-=50"
        }, 300);
        $(this).addClass('zoom');
    }
});

链接

只需使用

$（this.sibles（）.attr（“style”，”）即可清空同级div的属性
style

这是工作小提琴：
谢谢，但一次只能打开一个盒子。例如，如果打开了box1，单击box2应关闭box1。使用
$（'.zoom'）。而不是（this）。removeAttr（'style'）。removeClass（'zoom'）。请参见@请确认，如果连续单击一个框，大小应增加，当单击另一个框时，第一个框大小应调整大小并定位为默认大小？
$('.box').on('click', function(e) {
  e.preventDefault();
  $(this).stop(true, false).animate({
    width: "+=100",
    height: "+=100",
    top: "-=50",
    left: "-=50"
  }, 300);
  $(this).siblings().attr("style", ""); // new line added
});