Javascript CSS转换是即时的元素

编辑：修复，Elementor覆盖了一些样式，请参见下面我自己的答案

我正在尝试为div的一个简单的max-height属性设置动画，但我似乎无法为过渡设置动画，它会立即过渡。我正在尝试复制此教程：

我正在使用此Javascript更改按钮单击时的最大高度：

<script>
    var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
</script>

隐藏div是有效的，它只是没有动画，而w3schools示例在我的safari浏览器中动画效果很好。我也试过Chrome，但没什么不同

一些设置信息：

• 浏览器：Safari 14（Chrome无差异）
• Wordpress与Elementor一起构建页面
• 插入JS的代码片段插件

---

我在网上找到的所有东西都试过了，但似乎都没用。可能我现在正在监督一些明显的错误，所以非常感谢您的帮助

您尚未提供要检查的完整代码。但是检查下面的代码，我复制了你的代码并添加了其他代码。检查你是否发现你缺少什么

var coll=document.getElementsByClassName（“section_按钮”）；
var i；
对于（i=0；i

。章节内容{
最大高度：0；
溢出：隐藏；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-ms过渡：所有2秒轻松；
-o-过渡：所有2s容易；
过渡：一切都很轻松；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

Open可折叠
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

事实证明Elementor覆盖了转换属性谢谢你的回答，你完全正确，我没有添加所有内容，结果Elementor实际上覆盖了我的转换属性。我将在自己的答案中解释一切，供其他用户查找。再次感谢

.section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}