时间戳

首页 > 解决方案 > 有人可以告诉我我的下拉菜单 javascript 代码有什么问题吗

javascript - 有人可以告诉我我的下拉菜单 javascript 代码有什么问题吗

问题描述

我一直在学习 Javascript，作为一些练习，我想我会为自己创建一个下拉导航菜单，它可以通过“点击”而不是悬停来工作。我已经创建了下面的代码（不起作用），我想知道是否有人可以解释原因，这样我就可以看到我哪里出错了。

我可以打开下拉菜单，但是当我添加关闭下拉菜单的代码时，下拉菜单甚至都没有打开。

我希望有人能指出我正确的方向，这样我就可以看到我哪里出错了，我可以避免将来出现此类问题

(function() {
  let menuHeader = document.querySelectorAll('.menu-item-has-children');
  let subMenu = document.querySelector('.sub-menu');
  menuHeader.forEach(function(btn) {
    btn.addEventListener('click', function(event) {
      event.preventDefault();
      subMenu.classList.add('nav-open');
      // Close if anywhere on screen aprt form menu is clicked
      if (subMenu.classList.contains('nav-open')) {
        window.onclick = function(event) {
          if (!event.target.classList.contains('sub-menu')) {
            subMenu.classList.remove('nav-open');
          }
        };
      };
    });
  });


})();
<nav class="main-nav">
  <ul>
    <li><a href="" title="Home">Home</a></li>
    <li class="menu-item-has-children"><a href="#" title="What We Do">What We Do</a>
      <ul class="sub-menu">
        <li><a href="" title="">Page 1</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
        <li><a href="" title="">Page 4</a></li>
        <li><a href="" title=" ">Page 5</a></li>
        <li><a href="" title="">Page 6</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children"><a href="#" title="Our Work">Our Work</a>
      <ul class="sub-menu">
        <li><a href="" title="">Portfolio 1</a></li>
        <li><a href="" title="">Portfolio 2</a></li>
        <li><a href="" title="">Portfolio 3</a></li>
        <li><a href="" title="">Portfolio 4</a></li>
        <li><a href="" title="">Portfolio 5</a></li>
      </ul>
    </li>
    <li><a href="" title="">Contact</a></li>
  </ul>
</nav>

根据要求，CSS如下

.main-nav ul > li   {
    display: inline;
    position: relative;
}


.main-nav ul li  a  {
    display: inline-block;
    font-family: bebas-neue, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: #333;
    font-size: 1.3em;
    padding: 0.5em 0.8em 0.8em 0.8em;
    transition: background 0.2s linear;
}

.main-nav ul li  a:hover    {
    background: #00a492;
    color: #fff;
}

.main-nav ul li a:not(:only-child):after {
    content: '\25bc';
    font-size: 0.6em;
    position: relative;
    top: -4px;
    left: 2px;
}



/* Second Level of Navigation */

.main-nav ul li  ul {
    width: 250px;
    position: absolute;
    top: 160%;
    left: 0;
    background: #00a492;
}

.main-nav ul li  ul li a    {
    display: block;
}

.sub-menu   {
    display: none;
}

.nav-open   {
    display: block;
}

.slicknav_menu {
    display:none;
}

.highlight-btn  {
    background: #00a492 !important;
    color: #fff !important;
}

``

标签： javascripthtmlcss

解决方案

我认为它可能会发生，因为首先你添加nav-open的类比你检查的是否存在，如果是的话，你正在向窗口添加事件（窗口仍然可以捕获这个事件）并删除这个类，所以什么都不应该发生。尝试添加event.stopPropagation()下event.preventDefault()

(function() {
  let menuHeader = document.querySelectorAll('.menu-item-has-children');
  let subMenu = document.querySelector('.sub-menu');
  menuHeader.forEach(function(btn) {
    btn.addEventListener('click', function(event) {
      event.preventDefault();
      event.stopPropagation()
      subMenu.classList.add('nav-open');
      // Close if anywhere on screen aprt form menu is clicked
      if (subMenu.classList.contains('nav-open')) {
        window.onclick = function(event) {
          if (!event.target.classList.contains('sub-menu')) {
            subMenu.classList.remove('nav-open');
          }
        };
      };
    });
  });


})();```

推荐阅读