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

这是一种错字。你写了＆＃34; $ function {＆＃34;但你可能是这个意思：

$(document).ready(function() {

其余的都很好。此外，文件就绪可以用更短的形式表示：

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

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

Answer 2

这里：jQuery ready方法将匿名函数作为参数...所以你的代码的问题只是传递那个函数function(){}

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

$(document).ready(function() {

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

});

在jQuery中使用toggleClass来缩小div

2 个答案: