Question

我可以在jquery中设置div元素的动画。在我的代码中仅用于静态。如何动态使用。

<!DOCTYPE HTML>
<html><head>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".chk1").click(function(){
            $("#box").animate({height:"100px"});
            $("#box1").animate({height:"50px"}); 
        });
        $(".chk2").click(function(){
            $("#box1").animate({height:"100px"});
            $("#box").animate({height:"50px"});  
        });
    });
</script>
</head>
<body>
<div id="box" class="chk1" style="background: none repeat scroll 0% 0% rgb(152, 191, 33); height: 50px; width: 200px; margin: 6px;">
</div>
<div id="box1" class="chk2" style="background: none repeat scroll 0% 0% red; height: 50px; width: 200px; margin: 6px;">
</div>
</body></html>

有两个div。如果第一个单击，则变大，剩下的变小。所有div都遵循了模式。如果我需要添加一个div，目前我复制jquery代码。我们如何动态添加div。你能帮忙吗？

感谢，迪内希

Answer 1

通过为两个div元素提供单个类（在我的示例中为expander），您可以使其更加动态，而不必重复相同的代码两次：

$('.expander').click(function(){
   $('.expander').not(this).animate({height:"50px"});
    $(this).animate({height:"100px"})
});

实例：http://jsfiddle.net/RVCYz/

使用siblings()：

也可以实现同样的目标

$('.expander').click(function(){
    $(this).animate({height:"100px"})
       .siblings()
       .animate({height:"50px"});
});

实例：http://jsfiddle.net/RVCYz/2/

无论您添加多少div，这都将完美无缺：http://jsfiddle.net/RVCYz/4/

如何在动态jquery中使用div类

1 个答案: