javascript - Onclick 控制台消息未触发 (javascript)

Question

我正在构建一个简单的 flexbox 导航，当屏幕尺寸低于 980 像素时，会显示移动版本的菜单。

我正在构建 javascript 来执行此操作 - 有谁知道为什么单击移动版菜单时我的 console.log 消息不显示？

它让我陷入困境。

您必须将窗口缩小到 980px 以下才能明白我的意思。

https://codepen.io/emilychews/pen/eezYox?editors=1111

var mobileMenuButton = document.querySelector('#mobile-menu')
var mobileMenuItems = document.querySelector('#nav-menu')


// TOGGLE MOBILE MENU
var mobileMenu = false

if (mobileMenu === false) {

  function showMobileMenu() {

    mobileMenuButton.onclick(function() {
      console.log("clicked");
    })

    mobileMenu = true
  }

}

* {
  padding: 0;
  margin: 0;
}

p {
  color: white;
}

header {
  width: 100%;
}

#main-nav {
  width: inherit;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 5% 10px 5%;
  align-items: center;
}

#logo-wrapper {
  width: 150px;
  height: 75px;
  background-color: grey;
}

#nav-menu {
  display: flex;
  margin-left: auto;
}

#main-nav ul li {
  list-style-type: none;
  padding: 5px 10px;
  background: pink;
  margin: 0 5px;
}

#mobile-menu {
  display: none;
}

@media only screen and (max-width: 980px) {
  #mobile-menu {
    display: block;
    background: blue;
    padding: 5px 10px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 99;
  }
  #main-nav ul {
    display: none;
  }
}

<header>
  <nav id="main-nav">
    <div id="logo-wrapper"></div>
    <ul id="nav-menu">
      <li class="menu-item menu-item-1"><a>Home</a></li>
      <li class="menu-item menu-item-2"><a>About</a></li>
      <li class="menu-item menu-item-3"><a>Contact</a></li>
    </ul>
    <div id="mobile-menu"><a>Menu</a></div>
  </nav>
</header>

Answer 1

好吧，问题很少，您永远不会调用 showMobileMenu 函数，因此事件永远不会绑定(bind)到该元素。 onclick 不是函数。我相信你想要这样的东西:

var mobileMenuButton = document.querySelector('#mobile-menu')
var mobileMenuItems = document.querySelector('#nav-menu')

// TOGGLE MOBILE MENU
var mobileMenu = false
mobileMenuButton.addEventListener('click', function() {
    toggleMobileMenu();
})


function toggleMobileMenu() {
    if (mobileMenu === false) {        
        console.log("clicked");
        mobileMenu = true
    } else {
        console.log("not clicked");
        mobileMenu = false
    }
}