Javascript '；切换（）；工作不正常（缩小屏幕上的div）

以下是我的代码中不起作用的部分：

//code for div 3
//When clicked the div will double in size and the text within will change and then when clicked again, all will revert back to original
$('#div3').toggle(function(){
    $('#div3').animate({height: '300px', width: '300px'});
    document.getElementById('change-me').innerHTML="Click me to make me smaller!";
},
function(){
    $('#div3').animate({height: '150px', width: '150px'});
    document.getElementById('change-me').innerHTML="Click me to mke me bigger!";
});

每当我刷新页面以查看它是否正常工作时，应用此代码的div也会收缩并向右上角淡出页面

谢谢所有帮助我的人。

---

：）

原始代码的主要问题是它使用了

切换功能，根据文档，该功能是

显示或隐藏匹配的元素

看起来您想要的是在单击时切换
div3
的大小，如下所示

新增版本：1.0


让currSize=“small”；
让配置={
小型：{
尺寸：{
高度：'150px'，
宽度：“150px”
},
味精：“点击我使我更大！”
},
大：{
尺寸：{
高度：“300px”，
宽度：“300px”
},
味精：“点击我使我变小！”
}
};
$（'#div3'）。单击（（e）=>{
//切换当前大小
currSize=（currSize=“小”）？“大”：“小”；
//将动画设置为新大小
$（'#div3'）.animate（配置[currSize].size）；
//更新“更改我”文本
document.getElementById（'change-me'）.innerHTML=config[currSize].msg；
});
#第3部分{
高度：150像素；
宽度：150px；
背景色：rgba（64,64,64,0.1）；
光标：指针；
填充物：5px；
边框：1px纯黑；
}

有史以来最棒的跳水，真的，最好的。
点击我使我更大！
Ya，切换功能无法实现这一点。试试这个


函数大（）{
$（'#div3'）。设置动画({
高度：“300px”，
宽度：“300px”
});
document.getElementById（'change-me'）.innerHTML=“单击我使我变小！”；
$（'#div3'）。关（'click'，大）。开（'click'，小）；
}
函数小（）{
$（'#div3'）。设置动画({
高度：'150px'，
宽度：“150px”
});
document.getElementById（'change-me'）.innerHTML=“单击我让我变大！”；
$（“#div3”）.off（'click'，small）。on（'click'，big）；
}
$（'#div3'）。在（'click'，big'）
div#div3{
高度：150像素；
宽度：150px；
边框：1px纯绿色；
}

点击我
谢谢大家的帮助！非常感谢！：）