Javascript点击按钮，反函数

Javascript click button, inverse function

本文关键字：反函数 按钮 Javascript      更新时间：2023-09-26

我需要知道这个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

它确实有效，您只是看不到它，因为：

  • 您的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>

相关文章：