javascript - 单击导航项后导航覆盖不会关闭

Question

我在我的投资组合网站上工作，但我的导航覆盖有问题。当我打开它时，它工作得很好。当我单击覆盖中的某个项目时，它会在页面上导航到它，因为它导航到主页的一部分，但不会关闭导航覆盖。单击 X 仍然会关闭它，因此那里没有问题。单击导航项后它不会关闭

我正在使用带有toggleClass的香草javascript，但我无法弄清楚它为什么不关闭。我也尝试过removeClass，但没有运气

$(document).ready(function() {
  $('.menu-toggler').on('click', function() {
    $(this).toggleClass('open').show;
    $('.top-nav').toggleClass('open').show;
  });
});

.top-nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  z-index: 50;
  background-color: #16162d;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  transition: all 650ms cubic-bezier(1, 0, 0, 1);
}

.nav-list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  margin: 0 2rem;
}

.nav-link {
  font-family: 'The Historia Demo', sans-serif;
  font-size: 5rem;
  padding: 1rem;
}

.nav-link:hover,
.nav-link:focus {
  background: linear-gradient(to top, #00ffde, #0003fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-nav.open {
  top: 0;
  border-radius: initial;
}

.menu-toggler {
  position: absolute;
  top: 5rem;
  right: 5rem;
  width: 5rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1500;
  transition: transform 650ms ease-out;
}

.menu-toggler.open {
  transform: rotate(-45deg);
}

.bar {
  background: linear-gradient(to right, #00e4ff, #0003fd);
  width: 100%;
  height: 4px;
  border-radius: .8rem;
}

.bar.half {
  width: 50%;
}

.bar.start {
  transform-origin: right;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start {
  transform: rotate(-450deg) translateX(.8rem);
}

.bar.end {
  align-self: flex-end;
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.end {
  transform: rotate(-450deg) translateX(-.8rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggler">
  <div class="bar half start"></div>
  <div class="bar "></div>
  <div class="bar half end"></div>
</div>
<nav class="top-nav">
  <ul class="nav-list">
    <li><a href="index.html" class="nav-link">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#services" class="nav-link">Services</a></li>
    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
    <li><a href="#experience" class="nav-link">Experience</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>

对于这里的所有代码都是我的 codepen
https://codepen.io/Triable/pen/BayqOWO

标签： javascripthtmlcss

Answer 1

您需要添加另一个事件处理程序以单击.top-nav：

var $toggler = $('.menu-toggler');
var $topNav = $('.top-nav');

function toggle() {
  $toggler.toggleClass('open');

  $topNav.toggleClass('open');
}

$toggler.on('click', toggle);

$topNav.on('click', toggle);

.top-nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  z-index: 50;
  background-color: #16162d;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  transition: all 650ms cubic-bezier(1, 0, 0, 1);
}

.nav-list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  margin: 0 2rem;
}

.nav-link {
  font-family: 'The Historia Demo', sans-serif;
  font-size: 5rem;
  padding: 1rem;
}

.nav-link:hover,
.nav-link:focus {
  background: linear-gradient(to top, #00ffde, #0003fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-nav.open {
  top: 0;
  border-radius: initial;
}

.menu-toggler {
  position: absolute;
  top: 5rem;
  right: 5rem;
  width: 5rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1500;
  transition: transform 650ms ease-out;
}

.menu-toggler.open {
  transform: rotate(-45deg);
}

.bar {
  background: linear-gradient(to right, #00e4ff, #0003fd);
  width: 100%;
  height: 4px;
  border-radius: .8rem;
}

.bar.half {
  width: 50%;
}

.bar.start {
  transform-origin: right;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start {
  transform: rotate(-450deg) translateX(.8rem);
}

.bar.end {
  align-self: flex-end;
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.end {
  transform: rotate(-450deg) translateX(-.8rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggler">
  <div class="bar half start"></div>
  <div class="bar "></div>
  <div class="bar half end"></div>
</div>
<nav class="top-nav">
  <ul class="nav-list">
    <li><a href="index.html" class="nav-link">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#services" class="nav-link">Services</a></li>
    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
    <li><a href="#experience" class="nav-link">Experience</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>