Question

我改编了Simply-Nav中的代码（伟大的轻量级移动导航–感谢obscuredetour），以使背景半透明叠加层逐渐淡入，而不是随导航一起滑入。

可以正常工作，但是我现在失去的是能够单击/点击半透明覆盖层（在右侧）以关闭整个导航。

事件监听器仍然存在– pageOverlay.addEventListener('click', toggleNav); –但是没有触发pageOverlay.classList.remove('-open');。

overlay div不再是父级<ul class="nav-list">的子级，因此我不知道这是否与其有关。

我尝试在overlay div上创建一个透明overlay，并向其中添加一个事件侦听器，但这没有用。

这是代码，如果有人有任何想法，我将非常感谢您的帮助。我仍然是新手，因此无疑这是显而易见的。非常感谢。

/*
  simply-nav.js - v1.2.1
  https://github.com/obscuredetour/simply-nav

  Licensed MIT © Jeffrey Summers
*/

// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {

  const sideNav = document.querySelector('.nav-list'),
    toggleNavBtn = document.querySelector('.toggle-nav'),
    burger = document.querySelector('.burger'),
    pageOverlay = document.querySelector('.overlay'),
    navLinks = document.querySelectorAll(".link"),
    body = document.querySelector('body'),
    html = document.querySelector('html');

  // Disable page scroll
  function disablePageScroll() {
    if (sideNav.classList.contains('-open')) {
      body.classList.add('_disableScroll');
      html.classList.add('_disableScroll');
    } else {
      body.classList.remove('_disableScroll');
      html.classList.remove('_disableScroll');
    }
  };

  // Nav funtion (toggle)
  function toggleNav() {
    sideNav.classList.toggle('-open');
    pageOverlay.classList.toggle('-open');
    burger.classList.toggle('open');
    disablePageScroll();
  };

  // To default
  toDefaults = () => {
    // Close nav menu
    sideNav.classList.remove('-open');
    pageOverlay.classList.remove('-open');
    burger.classList.remove('open');
    // Make sure scrolling is enabled
    body.classList.remove('_disableScroll');
    html.classList.remove('_disableScroll');
  }

  // Event listeners
  toggleNavBtn.addEventListener('click', toggleNav);
  pageOverlay.addEventListener('click', toggleNav);

  // (on mobile) close nav menu when link is clicked
  // this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
  navLinks.forEach(el => {
    el.addEventListener('click', (event) => {
      toDefaults();
    });
  });


  // when browser is resized (past breakpoint) reset to defaults
  (function() {

    window.addEventListener("resize", resizeThrottler, false);
    let resizeTimeout;

    function resizeThrottler() {
      // ignore resize events as long as an actualResizeHandler execution is in the queue
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();

          // The actualResizeHandler will execute at a rate of 15fps
        }, 66);
      }
    }

    function actualResizeHandler() {
      // handle the resize event

      // Window resized width
      let width = window.innerWidth;

      // If resized greater than BREAKPOINT (default: 800px), then reset nav functions
      if (width >= 800) {
        toDefaults();
      }
    }

  }());


})();

/*******HAMBURGER TOGGLE*******/

.toggle-nav {
  background-color: transparent;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  outline: none;
  margin: 0;
  padding: 3vh;
}

.logo-link {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

.logo-link>.logo {
  max-width: 60px;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transition: max-height 0.2s ease-in-out;
  -webkit-transition: max-height 0.2s ease-in-out;
}


/*******HAMBURGER TOGGLE*******/

.nav-list {
  background-color: transparent;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 10vh;
  bottom: 0;
  left: -50rem;
  width: 60%;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s ease-in-out;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  z-index: 6;
}

.nav-list.-open {
  width: 100%;
  left: 0;
  padding-bottom: 4.5rem;
}

.nav-list.-open>.list.-left {
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-list>.list.-left {
  background: rgba(50, 31, 101, 0.95);
  position: relative;
  width: 60%;
  height: 100%;
}

.overlay {
  margin: 0;
  padding: 0;
  display: block;
  min-height: 100vh;
  background: rgb(0 0 0 / 65%);
  position: absolute;
  bottom: 0;
  width: 100%;
  top: 10vh;
  cursor: pointer;
  z-index: 5;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s ease-in-out;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s linear;
}

.toggle-overlay {}

.overlay.-open {
  visibility: visible;
  opacity: 1;
}


/****** LIST ITEMS ******/

.nav-list>.list>.item {
  display: flex;
  padding: 0;
  border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}

.nav-list>.list>.item:last-child {
  border-bottom: 0;
}

.nav-list>.list>.item>.link {
  border-color: transparent;
  text-decoration: none;
  padding: 1.5rem 1rem 1.5rem 1rem;
  flex-basis: 100%;
  display: block;
  background: transparent;
  font-size: 1.5rem;
  padding-left: 1.5rem;
  color: #e0e0e0;
  transition: all 0.3s ease-in-out;
}

.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
  color: #e90052;
}

._disableScroll {
  overflow-y: hidden !important;
}


/***********BURGER BUTTON STYLES***********/

.burger {
  height: 3em;
  width: 3em;
  position: relative;
  font-size: 10px;
  cursor: pointer;
  -webkit-transition: .2s all;
  -o-transition: .2s all;
  transition: .2s all;
}

.burger:after {
  content: '';
  display: block;
  position: absolute;
  height: 150%;
  width: 150%;
  top: -25%;
  left: -25%;
}

.burger>.burger-lines {
  top: 50%;
  margin-top: -0.125em;
}

.burger>.burger-lines:before {
  left: 0;
  top: 1em;
}

.burger>.burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-offset>.burger-lines {
  top: 50%;
  margin-top: -0.125em;
}

.burger.-offset>.burger-lines:before {
  left: 1em;
  top: 1em;
}

.burger.-offset>.burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
  -webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
  -o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
  transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}

.burger.-squeeze .burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-squeeze .burger-lines:before {
  left: 0;
  top: 1em;
}

.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
  width: 2em;
}

.burger.-squeeze.-offset .burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-squeeze.-offset .burger-lines:before {
  left: 1em;
  top: 1em;
}

.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
  -webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
  -o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
  transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}

.burger.-squeeze.open .burger-lines {
  background-color: transparent;
}

.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
  left: 0.5em;
  top: 0px;
}

.burger.-squeeze.open .burger-lines:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.burger.-squeeze.open .burger-lines:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.burger-lines,
.burger-lines:after,
.burger-lines:before {
  pointer-events: none;
  display: block;
  content: '';
  width: 100%;
  border-radius: 0.25em;
  background-color: #e0e0e0;
  height: 0.25em;
  position: absolute;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

.burger.-squeeze>.burger-lines {
  top: 50%;
  margin-top: -0.125em;
}

.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
  transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}

.burger.-squeeze>.burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-squeeze>.burger-lines:before {
  left: 0;
  top: 1em;
}

.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
  transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}

.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
  width: 2em;
}

.burger.-squeeze.-offset>.burger-lines:after {
  left: 0;
  top: -1em;
}

.burger.-squeeze.-offset>.burger-lines:before {
  left: 1em;
  top: 1em;
}

.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
  transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}

.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
  width: 2em;
}

.burger.-squeeze.open>.burger-lines {
  background-color: transparent;
}

.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
  left: 0.5em;
  top: 0px;
}

.burger.-squeeze.open>.burger-lines:before {
  transform: rotate(-45deg);
}

.burger.-squeeze.open>.burger-lines:after {
  transform: rotate(45deg);
}

<header>
  <button class="toggle-nav" type="button">
        <div class="burger -squeeze -offset" type="button">
          <span class="burger-lines"></span>
        </div>
      </button>

  <ul class="nav-list" role="navigation">
    <div class="list -left">
      <li class="item">
        <a class="link" href="#">Menu item 1</a>
      </li>
      <li class="item">
        <a class="link" href="#">Menu item 2</a>
      </li>
      <li class="item">
        <a class="link" href="#">Menu item 3</a>
      </li>
      <li class="item">
        <a class="link" href="#">Menu item 4</a>
      </li>
    </div>
  </ul>
  <div class="overlay"></div>
</header>

Answer 1

这实际上看起来像是CSS问题。标签<ul class="nav-list -open">的宽度为100％，因此，它填满了整个屏幕，不允许鼠标单击以覆盖元素。您应该：

删除width: 100%类上的-open（问题的根源）
在width: 60%上删除.list.-left（导航器的子项不会填充它，这没有什么意义……）
在left: -80rem中设置.nav-list而不是50rem（以完全隐藏它）

这将使其正常工作。

事件监听器由于某种原因未触发

1 个答案: