2016-04-13 4 views
1

У меня есть кнопка меню для мобильных устройств, которая имеет анимацию, класс изменяется при щелчке по меню и при повторном нажатии на кнопку возвращается к нормальной. Меню также появляется по щелчку.Удалить класс с помощью 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"); 
    }); 
} 



})(); 

Мне нужно знать, как добавить удалить этот класс для кнопки меню, по нажатию одной из моих элементов списка в моем списке? любая помощь очень ценится.

ответ

0

Чтобы удалить класс из элемента вместо его простого переключения, используйте расширение .removeClass для селектора элементов JQuery. Добавьте к этому якорю ссылки

0

Если вы используете JQuery в любом случае, а затем использовать это для класса переключая логики

$(".main-menu ul li a").click(function(){ 
    e.preventDefault(); 
    $(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active"); 
}); 
Смежные вопросы