Jquery切换：调整div1的大小并更改div2的值 $（文档）.ready（函数（）{ $（“#按钮”）。切换（函数（）{ $（“#预览”）。设置动画({ 身高：940， 宽度：940 }, 800); $（“#按钮”）。替换为（'Close'）； }，函数（）{ $（“#预览”）。设置动画({ 身高：500， 宽度：500 }, 800); $（“#按钮”）。替换为（'Open'）； }); });

这会使预览屏幕更改大小并更改按钮，但它不会执行切换的第二部分，即重新调整预览大小并将按钮的值更改为原始状态（打开）

你知道如何解决这个问题吗？

这种方式使用的

toggle（）

函数在最新版本的jQuery中被弃用并删除。您必须创建自己的切换功能。此外，用新元素替换元素时，事件处理程序将丢失：

$(document).ready(function () {
    $("#button").toggle(function () {
        $("#preview").animate({
            height: 940,
            width: 940
        }, 800);
        $("#button").replaceWith('<div id="button" style="margin:50px">Close</div>');
    }, function () {
        $("#preview").animate({
            height: 500,
            width: 500
        }, 800);
        $("#button").replaceWith('<div id="button" style="margin:0px">Open</div>');
    });
});

---

这里有一个可以实现您想要的功能的小提琴，它使用的技术不同于“toggle（）”。这种技术使用一个标志来通过添加和删除类来设置“打开/关闭”按钮的状态

工作小提琴：

jquery代码：

$("#button").on('click', function() {
    var state = $(this).data('state');
    if ( state ) {
        $("#preview").animate({height: 500, width: 500 }, 800);
        state = false;
    }else{
        $("#preview").animate({height: 940, width: 940 }, 800);
        state = true;
    }
    $(this).text(state ? 'Open' : 'Close').data('state', state);
});

css:

---

这是因为您正在替换该元素。除此之外，还可以更改文本内容。另外，我不认为toggle需要两个回调来交替执行。您使用的是jQuery 1.8+？如果是这样，这可能会有所帮助

$(document).ready(function () {

    $("#button").on("click", function () {

        if ($(this).hasClass("close")){

            $(this).removeClass("close");
            $(this).text("open");
            $("#preview").animate({
                height: 100,
                width: 100
            }, 800);
        }else{

            $(this).addClass("close");
            $("#preview").animate({
                height: 300,
                width: 300
            }, 800);
            $("#button").text("close");
        }
    });

});

#button, #preview{     width: 100px;    height: 100px; }
#button {     background-color: red;}
#preview{     background-color: blue;}