使用 jQuery 中的 toggleClass 缩小 div

Question

我有一个 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>
//*********************************************************************

Answer 1

此处：jQuery ready 方法将匿名函数作为参数...所以您的代码的问题只是传递该函数 function(){}

您可以在此处查看实际代码： http://jsfiddle.net/leojavier/41wmck17/

$(document).ready(function() {

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

});

Answer 2

有点打字错误。你写了“$function {”，但你可能是这个意思：

$(document).ready(function() {

其他的就好了。另外，文档就绪可以用更短的形式表示：

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

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

使用 jQuery 中的 toggleClass 缩小 div

Using toggleClass in jQuery to shrink a div

javascript

php

jquery

toggleclass