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>

​