Question

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

我正在构建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函数，所以事件永远不会绑定到该元素。 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
    }
}

Onclick控制台消息未触发（javascript）

1 个答案: