Javascript 在jQuery中使用toggleClass收缩div

我有一个div，当我点击一个按钮时，我试图缩小它。当我再次单击它时，我希望它恢复到原始大小。我正在使用toggleClass来实现这一点，但我的代码出现了一些错误，我不确定在哪里。请看一看。谢谢

//*********************************************************************
<style>

    div {
    border: 1px solid black;    
    width: 500px;
    height: 500px;  
    }
    .shrink {
    width: 250px;
    height: 250px;
    }   

</style>

//*********************************************************************  

<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>

//*********************************************************************

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">   

$(document).ready($function {

$("button").click(function(){
    $("div").toggleClass("shrink");
});               

});

</script>
//*********************************************************************

//*********************************************************************
div{
边框：1px纯黑；
宽度：500px；
高度：500px；
}
.收缩{
宽度：250px；
高度：250px；
}   
//*********************************************************************  
点击我
你能告诉我一个秘密吗？
//*********************************************************************
$（文档）.ready$函数{
$（“按钮”）。单击（函数（）{
$（“div”）.toggleClass（“收缩”）；
});               
});
//*********************************************************************

这里：jQuery

ready

方法将匿名函数作为参数。。。所以代码的问题只是传递那个函数

function（）{}

在这里，您可以看到正在运行的代码：

---

这是一种打字错误。您编写了“$function{”，但您的意思可能是：

$(document).ready(function() {

其余的都好。 此外，document ready可以用较短的形式表示：

$(function() {
    ...
    ...
});

---

也许你们只是混淆了这两者。我也做过几次，回到我的初学者时代：）

代码对我来说很好，检查控制台有并没有错误你们正在经历的错误行为是什么？我想你们的代码可以工作Hi Jessica问题是你们试图传递的$函数，请看下面我的答案。希望对你有帮助。。。

$(function() {
    ...
    ...
});