点击模态框树图标实现Div上滑效果（无jQuery）故障排查

点击模态框中的树图标时，希望让指定div上滑显示，但当前代码无法实现效果，以下是当前使用的代码及修正方案：

原代码 #

HTML #

<div id="alberi" class="alberi">
      <div id="acero">
          <img src="./images/tree.png">
          <h1>ACERO CAMPESTRE</h1>
          <h2>Altezza: 7,0m</h2>
          <h2>Ingombro: 2,0m</h2>
          <h2>Fornitore</h2>
      </div>
</div>

CSS #

.alberi{
    background-color: green;
    display: flex;
    height: 0px;
    width: 90.9%;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 30px;
    /* 可选：添加过渡动画让滑动更平滑 */
    /* transition: height 0.3s ease; */
}

.slided{
    height: 270px;
}

原JS（存在错误） #

const sezionealberi = document.querySelector('#alberi')
const pulsantealberi = document.querySelector('#m-tree')

pulsantealberi.addEventListener('click', primavera)

let mezzastagione = 1;

function primavera()
{
    if(mezzastagione == 1) 
    { 
        sezionealberi.innerHTML = `<class = "alberi slided">`;
        mezzastagione = 0;
    }
    
    else{
        sezionealberi.innerHTML = `<class = "alberi">`;
        mezzastagione = 1;
    }
}

错误分析 #

原JS代码的核心问题是误用了innerHTML属性：innerHTML用于修改元素内部的HTML内容，而非元素自身的属性。你试图通过它修改div的class属性，完全不符合语法规范，自然无法生效。

修正方案 #

直接操作元素的classList属性来添加/移除类，这是原生JS操作类名的标准方式：

修正后的JS（方案一：保留状态变量） #

const sezionealberi = document.querySelector('#alberi')
const pulsantealberi = document.querySelector('#m-tree')

pulsantealberi.addEventListener('click', primavera)

let mezzastagione = 1;

function primavera() {
    if (mezzastagione === 1) {
        // 添加slided类
        sezionealberi.classList.add('slided');
        mezzastagione = 0;
    } else {
        // 移除slided类
        sezionealberi.classList.remove('slided');
        mezzastagione = 1;
    }
}

更简洁的方案（方案二：使用toggle自动切换） #

classList.toggle()方法可以自动切换类的存在状态，无需手动维护状态变量：

const sezionealberi = document.querySelector('#alberi')
const pulsantealberi = document.querySelector('#m-tree')

pulsantealberi.addEventListener('click', () => {
    sezionealberi.classList.toggle('slided');
});

可选优化 #

如果希望滑动过程更平滑，给.alberi类添加过渡动画：

.alberi{
    /* 原有样式 */
    transition: height 0.3s ease;
}

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