Question

我将所有内容都放在一个html文档中，以防它可能是导致问题的CSS ...我使用div和css制作了4个绿色框。我希望它们在点击时增大 - 也许只是从80x80px到100x100px或类似的东西。现在jQuery代码就是我从别人问题的答案中得到的代码 - 我对jQuery很新，并且遇到了很多麻烦。任何帮助将不胜感激!!

<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>

Answer 1

您希望为div（锚点）内的a设置动画。为此，您可以将animate函数简单地应用于内部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/

Answer 2

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

通过说giveme $（“＃green_box_container a”），您将使用green_box_container获取所有锚标记。然后，您尝试使用锚标记调整锚点而不是实际div。

要选择green_box_container中锚点内的所有div，您只需要为jquery选择器添加另一个级别，如下所示：

$（“＃green_box_container a div”）

希望这有帮助。

试图切换div大小

2 个答案: