La superposition de navigation ne se ferme pas après avoir cliqué sur un élément de navigation

Triable

Je travaille sur le site Web de mon portfolio, mais j'ai un problème avec ma superposition de navigation. Quand je l'ouvre, cela fonctionne très bien. Lorsque je clique sur un élément dans la superposition, il y accède sur la page, car il navigue vers une partie de la page d'accueil, mais ne ferme pas la superposition de navigation. Cliquer sur le X le ferme toujours, donc il n'y a pas de problème. Il ne se ferme pas après avoir cliqué sur un élément de navigation

J'utilise javascript vanille pour cela avec toggleClass, mais je ne comprends pas pourquoi il ne se ferme pas.J'ai essayé removeClass aussi, mais pas de chance là-bas

$(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>

Pour tout le code, voici mon codepen
https://codepen.io/Triable/pen/BayqOWO

Ou Drori

Vous devez ajouter un autre gestionnaire d'événements pour cliquer sur .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>

Articles connexes