试图切换div大小

我把所有内容放到一个html文档中，以防万一它可能是导致问题的css ...我使用div和css制作了4个绿色框。我希望它们在点击时尺寸增大 - 也许只是从80x80px到100x100px或类似的东西。现在，这里的jQuery代码是我从其他人的问题中回答的代码 - 我对jQuery非常陌生，并且遇到了很多麻烦。任何帮助，将不胜感激！！试图切换div大小

<html> 
<head> 
<title>For testing</title> 

<style type="text/css"> 
#green_box_container { 
    float: left; 
    padding: 0px; 
    margin-left: 345px; 
    height: 300px; 
    width: 500px; 
} 

#green_box1 { 
    background-color: #070; 
    margin: 0px; 
    padding: 0px; 
    height: 80px; 
    width: 80px; 
    float: left; 
    margin-left: 20px; 
} 

#green_box2 { 
    background-color: #070; 
    margin: 0px; 
    padding: 0px; 
    height: 80px; 
    width: 80px; 
    float: left; 
    margin-left: 20px; 
} 

#green_box3 { 
    background-color: #070; 
    margin: 0px; 
    padding: 0px; 
    height: 80px; 
    width: 80px; 
    float: left; 
    margin-left: 20px; 
} 

#green_box4 { 
    background-color: #070; 
    margin: 0px; 
    padding: 0px; 
    height: 80px; 
    width: 80px; 
    float: left; 
    margin-left: 20px; 
} 
</style> 

<script src="jquery-1.9.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#green_box_container a").click(function() { 
    var $this = $(this), 
     val = $this.height() == 200 ? '50px' : '200px'; 
    $this.stop().animate({ 
     width: val, 
     height: val 
    }, "slow"); 
}); 
}); 
</script> 

</head> 

<body> 

<div id="green_box_container"> 
<a href="#"><div id="green_box1"></div></a> 
<a href="#"><div id="green_box2"></div></a> 
<a href="#"><div id="green_box3"></div></a> 
<a href="#"><div id="green_box4"></div></a> 
</div> 

</body> 
</html>

来源

2013-03-19 Brooke B

你的问题是什么？什么都没有发生？ – 2013-03-19 07:56:13

当我在浏览器中预览（我尝试过Firefox和Chrome）并点击div时，没有任何反应。 – 2013-03-19 08:05:41

它看起来像要动画a（锚）内div。为此，你可以简单地套用动画功能，内部div如下：

$(document).ready(function() { 
    $("#green_box_container a").click(function() { 
     var $this = $(this), 
      val = $this.height() == 200 ? '50px' : '200px'; 
     $this.find("div").stop().animate({ 
      width: val, 
      height: val 
     }, "slow"); 
    }); 
});

下面就来验证这个想法小提琴：http://jsfiddle.net/bHyHS/

来源

2013-03-19 07:43:59 Candide

谢谢！你能告诉我什么是“== 200？”50px'：'200px';“ “val”是做什么的？它在jsfeddle.net链接上效果很好，但我想知道是否可以改变它以使尺寸变化不那么剧烈。如果你点击一个绿色的div，其他人回到原来的大小，我也会喜欢它。感谢您对我的快速反应和耐心！ ---另外，当我将jQuery代码复制到DreamWeaver中，然后在Firefox中预览我的页面时，我没有得到与jsfiddle页面相同的结果...是我的浏览器一直是麻烦吗？ – 2013-03-19 07:55:30

出于某种原因，这对jsfiddle.net很好，但不是在我的浏览器??是因为我使用jQuery 1.9.1吗？ – 2013-03-19 08:14:33

@BrookeBenson我怀疑这是浏览器的事情。我会确保jquery首先被加载（jsfiddle包含它）。在'== 200？ '50px'：'200px';'''后面跟'：'被称为三元操作，它意味着与'if ... == 200'和'50px'else'200px''相同。顺便说一句，将事件附加到锚上是没有意义的，我更新了小提琴，将它应用到内部div：http://jsfiddle.net/bHyHS/2/ – Candide 2013-03-19 08:34:34

感谢完整的例子。我在本地测试了这个，看起来你的jquery选择器是你遇到问题的地方。

通过说giveme $（“＃green_box_container a”），你抓住所有的锚标签green_box_container。然后，您尝试调整锚点的大小，而不是使用锚点标记调整实际的div。

要选择green_box_container内锚内的所有div的，你只需要到另一个层次添加到您的jQuery选择如下：

$（“＃green_box_container一个div”）

希望这有助于。

来源

2013-03-19 08:00:46

当我在浏览器中预览时，仍然没有任何东西，我是害怕。：（还是）感谢你的建议！ – 2013-03-19 08:05:06

试图切换div大小

回答

相关问题