Why button function only works once-CodePudding

i have sidebar if i click on button and then side bar appears from left, and when i click on body side bar hides, but why it is happening only for once.

FIDDLE

HTML

<body>
  <div class="site-overlay"></div>
  <a href="#menu" class="menu-link"> button &#9776;</a>
  <nav id="menu" class="panel" role="navigation">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">The Ballad of El Goodo</a></li>
          <li><a href="#">Thirteen</a></li>
          <li><a href="#">September Gurls</a></li>
          <li><a href="#">What's Going Ahn</a></li>
      </ul>
  </nav>
</body>

JS:

$(document).ready(function() {
  $('.menu-link').bigSlide({
    easyClose: true
  });
  $('.menu-link').click(function() {
        $('body').addClass('menu-open');
    });
});

CSS:

a.menu-link {
  float: right;
  padding: 20px
}

nav#menu {
  background: lightblue;
  z-index: 100000000000000
}

.site-overlay {
    display: none;
}
.menu-open .site-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
  
    -webkit-animation: fade 500ms;
    animation: fade 500ms;
}

HOW CAN I MAKE IT WORK IT MANY TIMES, instead of only one time.

CodePudding user response：

After the click, your showing your overlay, but because it has z-index: 9998, the overlay is being placed on top of the button, so when you try to click the button, you're actually clicking on the overlay, not on the button.

You should make an event when the overlay is clicked to remove that class, like this:

$('.site-overlay').click(function() { $('body').removeClass('menu-open') })

CodePudding user response：

This is because the added class is not removed.

You can control it by adding a toggle value for that button.

CodePudding user response：

Instead of addClass put toggle.

On the way you put you will add "menu-open" once and it will never be removed.

you have more information about this here: https://www.w3schools.com/howto/howto_js_toggle_class.asp

CodePudding user response：

You can do it by this JS code.

$(document).ready(function() {
  $('.menu-link').bigSlide({
    easyClose: true
  });
  $('.menu-link').click(function() {
    event.stopPropagation();
        $('body').addClass('menu-open');
    });
  $('body').click(function(){
    $('body').removeClass('menu-open');
  })
});