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>标签，以便整洁。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Javascript点击按钮，反函数

1 个答案: