单击按钮时JavaScript不会触发

I am trying to make a button make a div pop up but currently I am facing an issue. The issue is that the class "toggle" is not being toggled when you click the button.

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

Here's my markup:

这是我的标记：

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

and my JS:

和我的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);

and my styling:

和我的造型：

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

Here's a live example via CodePen: http://codepen.io/ZoidCraft/pen/NRBOqb

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

3 个解决方案

#1

bottom-bar is not a valid variable name. Try bottomBar.

bottom-bar不是有效的变量名。试试bottomBar。

codepen

#2

As you can see in your pen, the variable name produces an error. Try renaming the variable bottom-bar to bottomBarand it runs.

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

#3

-2

Use underscore(_) rather than dash(-) if you want to have your style.

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

the variables could be bottom_bar not bottom-bar.

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

#1