2016-04-13 9 views
1

Ich habe eine mobile Menüschaltfläche, die eine Animation hat, ändert die Klasse beim Klicken auf das Menü und klicken Sie auf normal, wenn Sie erneut klicken. Ein Menü erscheint auch beim Klicken.Entfernen Sie die Klasse mit Jquery auf einem anderen Element

Ich möchte, dass der Animations-Endzustand auch wieder in den normalen Zustand zurückkehrt, wenn ich auf eines der Pop-Out-Menü-Ankerlinks klicke.

Hier ist mein 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> 

Hier ist das Skript Ich verwende das Menü

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

Hier ist der Code für das Entfernen/add-Klasse zum Animieren der Taste, um .

(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"); 
    }); 
} 



})(); 

Ich muss wissen, wie diese Klasse für die Menütaste, um hinzuzufügen, zu entfernen, auf Klick eines meiner Liste Artikel in meiner Liste? jede Hilfe sehr geschätzt.

Antwort

0

Um eine Klasse aus einem Element zu entfernen, statt sie nur zu wechseln, verwenden Sie die Erweiterung .removeClass für den JQuery-Elementselektor. Fügen Sie diese auf den Anker verbindet

0

Wenn Sie mit jquery sowieso, dann ist diese Verwendung für die Klasse Makeln Logik

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