У меня есть кнопка меню для мобильных устройств, которая имеет анимацию, класс изменяется при щелчке по меню и при повторном нажатии на кнопку возвращается к нормальной. Меню также появляется по щелчку.Удалить класс с помощью JQuery для другого элемента
Я хочу, чтобы состояние окончания анимации также возвращалось к нормальному состоянию, когда я нажимаю одну из ссылок привязки меню всплывающего меню.
Вот мой HTML код:
<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>
Вот сценарий, я использую для переключения меню, выполните
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Вот код для убрать/добавить класс для анимации кнопки ,
(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");
});
}
})();
Мне нужно знать, как добавить удалить этот класс для кнопки меню, по нажатию одной из моих элементов списка в моем списке? любая помощь очень ценится.