Remove class with Jquery on a different item

Question

I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.

I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.

Here is my HTML code:

<div class="o-grid__item">
        <button id="menu" class="c-hamburger c-hamburger--htx">
          <span>toggle menu</span>
        </button>
      </div>enter code here

<nav class="main-menu">   
<ul>

<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>

<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>

<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>

<li>
<a href="#contact">
<i class="fa"></i>
 <span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>

Here is the script I'm using to toggle the menu

$(document).ready(function(){
    $(".c-hamburger").click(function(){
        $(".main-menu").toggleClass("expand-menu");
    });
});

Here is the code for the remove/add class for animating the button.

(function() {

"use strict";

var toggles = document.querySelectorAll(".c-hamburger");

for (var i = toggles.length - 1; i >= 0; i--) {
  var toggle = toggles[i];
  toggleHandler(toggle);
}; 

function toggleHandler(toggle) {
  toggle.addEventListener( "click", function(e) { 
    e.preventDefault();
    (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
  });
}



})();

I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.

Answer 1

to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links

Answer 2

If you are using jquery anyways, then use this for the class toggling logic

$(".main-menu ul li a").click( function(){
  e.preventDefault();
  $(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});