Question

我正在尝试使用jquery中的div创建简单的make wide box，它们是三个不同的列框（红色，蓝色和棕色），每个列框使用CSS都有不同的大小。

我要做的是当按下按钮时，它会通过使用jquery更改css名称将列框大小更改为更宽的动画。

问题在于，当我按下按钮时，第一列（红色）在jquery中变宽时工作正常，但是没有工作第二个（蓝色）框以使用红色框同时制作更宽的动画。我错过了什么，为什么不工作！

<style type="text/css">
.col-md-1 {
    background-color: #F00;
    height: 300px;
    width: 100px;
}

.col-md-2 {
    background-color:#0F0;
    height: 300px;
    width: 200px;
}
.col-md-3 {
    background-color: #666;
    height: 300px;
    width: 300px;
}
.col-md-4 {
    background-color: #666;
    height: 300px;
    width: 400px;
}
.col-md-5 {
    background-color: #666;
    height: 300px;
    width: 500px;
}
.col-md-6 {
    background-color: #666;
    height: 300px;
    width: 600px;
}

</style>

<script type="text/javascript">
$(document).ready(function(){
    $("#buttons").click(function(){

       $(".col-md-1").toggleClass('col-md-6', 500);
       $("div").addClass("important");

       $(".col-md-2").toggleClass('.col-md-6', 500);
       $("div").addClass("important");

    });
});
    </script>

任何人都可以通过按下按钮帮助我如何使所有三个盒子同时变宽！

非常感谢。

AM

使用jquery扩大范围

0 个答案: