Javascript点击按钮，反函数

Question

我需要知道这个 js 代码有什么错误，我需要点击展开 div 并在第二次点击时 div 回到原来的尺寸这是javascript:

<script> function myBurger() { 
    document.getElementById("burger").classList.toggle('expand'); 
    } 
    </script>

相关的html是这样的:

<div class="container" onclick="myBurger()">
  <input id="click" name="exit" type="checkbox" />
  <label for="click"><span class="burger"></span>       
</div>  

<div id="burger" > prova</div>

这是CSS:

 #burger{ 
 height: 10px; 
 width: 10px; 
 background-color: #fff; 
 top: 10%; 
 left: 10%; 
 position: absolute; 
 transition: height 2s ease, width 2s ease;
 } 

 #burger.expand{ 
 height: 200px; 
 width: 200px; 

 } 

完整的代码在那里:www.figmentasergio.altervista.org

Answer 1

它确实有效，只是你看不到它，因为:

• 您的 div 不会导致任何回流
• 它没有背景颜色或边框

我给 #burger 添加了边框所以你可以看到它变大变小。我也关闭了你的<label>整洁标签。

function myBurger() {
    document.getElementById("burger").classList.toggle('expand');
}

#burger {
    height: 10px;
    width: 10px;
    background-color: #fff;
    top: 10%;
    left: 10%;
    position: absolute;
    transition: height 2s ease, width 2s ease;
    border: 1px red solid;
}
#burger.expand {
    height: 200px;
    width: 200px;
}

<div class="container" onclick="myBurger()">
    <input id="click" name="exit" type="checkbox" />
    <label for="click">
        <span class="burger"></span>
    </label>
</div>
<div id="burger">prova</div>