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>