Question

这是我的第一个问题，请随时告诉我，如果我不够具体或者我做错了什么！我想要一个jquery方法，用类改变所有div＆＃34; passive＆＃34;高度500 px和被动 - >有效，所以会有另一种方法将高度改回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");
});   

});
});`

Answer 1

jQuery.animate()代价高昂且不稳定。只需切换类并使用CSS转换

，您将获得更平滑的过渡

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

Array
  .from(document.querySelectorAll('.passive'))
  .forEach(
    e => e.addEventListener(
           'click', 
           evnt => e.classList.toggle('active')  
    )
)

.container { display:flex; }
.container>div { 
  flex:1 auto;
}

.passive { 
  background-color:red; 
  margin:5px; 
  height:100px; 
  width:20px; 
  transition:height 1s;
}
.active { 
  height:300px;
}

<div class="container">
  <div class="passive" tabindex=1></div>
  <div class="passive" tabindex=2></div>
  <div class="passive" tabindex=3></div>
</div>

Answer 2

您正在尝试与加载DOM后添加的类进行交互。默认情况下，单击函数仅适用于加载时存在的元素。您可以使用事件委派或向元素添加基类。如果添加基类，则可以简化单击功能。

您可以使用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');
            }
        });
    });

});

使用animate，addClass和RemoveClass创建div更改大小

2 个答案: