Question

我正试图让按钮弹出div但目前我正面临一个问题。问题是当您单击按钮时，“切换”类没有被切换。

这是我的标记：

<div class="bottom-bar">

    <div class="bottom-bar_top-info">
        <button class="bottom-bar_toggle-button">
            <i class="material-icons">&#xE88E;</i>
        </button>
        <span>More Information</span>
    </div>

</div>

和我的JS：

    function toggle(){

        var bottom-bar = document.querySelector('.bottom-bar');
                bottom-bar.classList.toggle('toggle');

    }        

    var button = document.querySelector('.bottom-bar_toggle-button');

    button.addEventListener('click', toggle);

和我的造型：

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 76%;
  margin: 0 12%;
  background-color: #FFFFFF;
  padding: 25px;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .bottom-bar .toggle {
    height: 100vh;
    top: 10%; }

.toggle {
  height: 100vh;
  top: 10%; }

.bottom-bar_top-info {
  text-align: center; }
  .bottom-bar_top-info span {
    opacity: 0.54; }

.bottom-bar_toggle-button {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  border: 0px;
  outline: 0px;
  margin: 16px;
  padding: 8px;
  cursor: pointer; }

以下是CodePen的实时示例：http://codepen.io/ZoidCraft/pen/NRBOqb

Answer 1

O(n)不是有效的变量名称。试试bottom-bar。

codepen

Answer 2

正如您在笔中看到的，变量名称会产生错误。尝试将变量bottom-bar重命名为bottomBar并运行。

Answer 3

如果你想拥有你的风格，请使用下划线（_）而不是短划线（ - ）。

变量可以是bottom_bar而不是bottom-bar。

单击按钮时JavaScript不会触发

3 个答案: