如何为点击显示/隐藏div的JS函数添加展开收起动画？

问题根源 #

1. CSS过渡不支持display属性的切换，所以原代码添加过渡后无动画效果
2. 修改后的JS存在语法错误：收起时错误设置display: "0px"，而非修改height属性
3. 直接读取元素的style.height不可靠：初始height定义在CSS中，内联样式无该属性，导致判断逻辑失效

解决方案 #

推荐方案：CSS类切换（样式与逻辑分离） #

这种方式更易维护，符合前端开发最佳实践。

修正后的CSS

#SearchContainer {
    border: none;
    outline: none;
    background-color: silver;
    color: #FFF;
    margin: 0;
    float: left;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 0;
    overflow: hidden; /* 隐藏收起时的溢出内容 */
    transition: height 0.3s ease; /* 自定义过渡时长和动画曲线 */
}

#SearchContainer.expanded {
    height: 40px;
}

修正后的JS

function SearchToggle(){
    const searchContainer = document.getElementById('SearchContainer');
    searchContainer.classList.toggle('expanded');
}

备选方案：直接操作height属性（修复原代码） #

如果偏好直接操作样式属性，可按以下方式修正：

修正后的CSS

#SearchContainer {
    border: none;
    outline: none;
    background-color: silver;
    color: #FFF;
    margin: 0;
    float: left;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

修正后的JS

function SearchToggle(){
    const searchContainer = document.getElementById('SearchContainer');
    // 获取计算后的实际高度，避免依赖内联样式
    const computedHeight = window.getComputedStyle(searchContainer).height;
    if (computedHeight === '0px') {
        searchContainer.style.height = '40px';
    } else {
        searchContainer.style.height = '0px';
    }
}

核心注意点 #

• 必须添加overflow: hidden：确保容器高度为0时，内部内容不会溢出显示
• CSS过渡仅支持数值型属性（如height、opacity），display这类离散属性无法产生过渡动画
• 类切换方式更利于后续扩展，比如需要修改动画时长或样式时，只需调整CSS即可

内容的提问来源于stack exchange，提问作者Dustin Angeletti