Hide mobile menu after clicking

Question

I’m having trouble hiding the menu in responsive mobile mode. There is something wrong, when I click on the link the menu disappears, but when I click to open again is giving a bug, it opens and closes quickly. What can it be?

$('.navBar li a').click(function() {
    $('nav #menu-toggle:checked ~ ul').slideUp('fast');
});

$('nav .label-toggle').click(function() {
    $('nav #menu-toggle:checked ~ ul').slideToggle('fast');
});

Project link: https://codepen.io/lucas-guse/pen/KeJBaw

Answer 1

EDIT

After your comments your problem became clearer. In fact that makes the menu expand and collect is this CSS rule nav #menu-toggle:checked ~ ul then what you need is to make sure that if the menu link is clicked the collection menu changing the state cheked of input.

For that you need to make one .trigger('click') in his input:checkbox, do not need to use the methods slideToggle etc, because that will make this effect is your CSS #menu-toggle:checked, to better understand see the code below.

$('.navBar li a').click(function() {
    $('#menu-toggle').trigger('click'); 
});

.navBar {
	position: fixed;
  min-width: 100%;
  z-index: 3;
  background:#000F23;
}

.logo {
  display: inline-block;
  height: 42px;
  margin: 45px 20px ;
  width: 187px;
}

.wrapper {
  margin: 0 auto;
  max-width: 100%;
  padding: 0 2%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  min-width: 40%;
}
nav ul a {
  color: #FFF;
  text-decoration: none;
  transition: all 0.5s ease;
}
nav ul a:hover {
  color: #AAA;
}
nav li {
    display: inline-block;
    padding: 6px 17px;
    font-size: 20px;
    font-family: 'Brandon Grotesque';
    font-weight: normal;
  font-style: normal;
}

nav ul li:last-child a{
    padding: 6px 17px;
    border: 2px solid;  
    border-radius: 5px;
    color: #00E4D9;
}

#menu-icon { display: none; /* hide menu icon initially */}

nav ul li:last-child a:hover{
    color: #00ABAF;
}

nav #menu-toggle {
  display: none;
}
nav .label-toggle {
  display: none;
}
nav .wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  nav nav ul a {
    color: #FFF;
  }
  nav ul {
    background-color: #000F23;
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: center;
    transition: all 1s ease;
    width: 100%;
    visibility: hidden;

  }
  nav li {
    color: #53354A;
    display: block;
    font-size: 1.5em;
    padding: 1em 0;
    text-align: center;
  }
  nav #menu-toggle:checked ~ ul {
    opacity: 1;
    height: 100vh;
    visibility: visible;
    background:#000F23; 
  }
  nav .label-toggle {
    background: linear-gradient(to bottom, #FFF 0%, #FFF 20%, transparent 20%, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%, #FFF 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 35px;
    margin-top: 3em;
    margin-right: 2em;
    width: 35px;
  }
  nav .wrapper {
    display: block;
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<nav class="navBar">
  <nav class="wrapper">
    <div class="logo">
      LOGO</div>
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul> 
      <li><a href="#sobre">Sobre</a></li>
      <li><a href="#funcionalidades">Funcionalidades</a></li>
      <li><a href="#planos">Planos</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="cadastro.html">Inscrever-se</a></li>
    </ul>
  </nav>
</nav>


      

OBS: You shouldn’t wear one <nav> within the other, the correct one would be <header><nav></nav></header> or put the class .wrapper in nav from the outside thus avoiding using <nav><nav></nav></nav>