Javascript 使用animate、addClass和RemoveClass制作div更改大小

这是我在这里的第一个问题，如果我不够具体或者我做错了什么，请随时告诉我！ 我想要一个jquery方法，它可以将类“passive”的所有div更改为高度500 px和passive-->active，因此还有另一个方法可以将高度更改回100px。上半场开始了，我换了课，但是第二场动画不会发生。在html中，我只有一个div和被动类

$("document").ready(function(){

$(function() { 

$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");    
});    


$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});   

});
});` 

---

您正在尝试与加载DOM后添加的类交互。默认情况下，单击函数将仅对加载中存在的图元起作用。您可以使用事件委派或向元素添加基类。如果添加基类，可以简化click函数

您可以使用

hasClass

执行if/else来检查元素是否具有特定的类。此外，还可以将if/else块中的

$（this）

方法链接在一起

$("document").ready(function() {

    $(function() {


        $("baseclassname").click(function() {
            if ($(this).hasClass('passive')) {
                $(this).animate({ height: '500px' });
                $(this).addClass("active");
                $(this).removeClass("passive");
            // $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
            } else {
                $(this).animate({ height: '100px' });
                $(this).addClass("passive");
                $(this).removeClass("active");
                // $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
            }
        });
    });

});

jQuery.animate（）。通过切换类并使用CSS进行转换，您将获得更平滑的转换

.passive {  
  height:100px; 
  transition:height 1s;
}
.active { 
  height:300px;
}


数组
.from（document.querySelectorAll（'.passive'））
弗雷奇先生(
e=>e.addEventListener(
“点击”，
evnt=>e.classList.toggle（'active'）
)
)
.container{display:flex；}
.container>div{
弹性：1自动；
}
.被动{
背景色：红色；
保证金：5px；
高度：100px；
宽度：20px；
过渡：高度1s；
}
.active{
高度：300px；
}