Reputation: 59
$(".side-nav-toggle").click(function() {
$("body").toggleClass("side-nav-open");
});
$(".nav-level-back").click(function() {
$(".nav-links-container").removeClass("open");
$(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {
$(".nav-links-ontainer").addClass("open");
$(this).children('div').addClass('open');
});
I wrote this jquery for navigation purpose , addclass works fine but when i want to remove addedclasses from divs removeClass function not working . When i trigger remove class function it highlights those targeted div but didnt remove class from it ,
kindly see this link http://picpaste.com/helpp-Nkc9zDIU.png
html
<nav class="main-nav js-target-container">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="/tr/en/Shop/Whats-New/Now?cm_sp=topnav-_-whatsnew-_-topbar">What's New</a>
<div class="nav-level-2 visibility-fix template-whats-new">
<div class="nav-level-2-container row max-girdle-width">
<div class="nav-level-back">Back</div>
<span class="line-break"></span>
<div class="list-container shop col-lg-2 col-xs-12">
<h3 class="heading">Shop by</h3>
<ul>
<li><a href="/tr/en/Shop/Whats-New/Now?cm_sp=topnav-_-whatsnew-_-thisweek">This Week</a></li>
<li><a href="/tr/en/Shop/Whats-New/Previously?cm_sp=topnav-_-whatsnew-_-lastweek">Last Week</a></li>
<li><a href="/tr/en/Shop/List/Whats_New_Last_Month?cm_sp=topnav-_-whatsnew-_-lastmonth">Last Month</a></li>
<li><a href="/tr/en/Shop/List/New_Designers?npp=view_all&cm_sp=topnav-_-whatsnew-_-newdesigners">New Designers</a></li>
<li><a href="/tr/en/Shop/List/Back_In_Stock?cm_sp=topnav-_-whatsnew-_-backinstock">Back In Stock</a></li>
<li><a href="/tr/en/Shop/List/All_Exclusives?cm_sp=topnav-_-whatsnew-_-exclusives">Exclusives</a></li>
<li><a href="/tr/en/Shop/List/New_Season_Arrivals?npp=view_all&cm_sp=topnav-_-whatsnew-_-newseasonnow">New Season Now</a></li>
</ul>
</div>
<div class="col-lg-2 whats-new-product">
<h3 class="heading">Editor's Picks</h3>
<a href="#">
<img src="">
<div class="product-designer"></div>
<div class="product-title"></div>
<div class="product-price"></div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Upvotes: 2
Views: 2415
Reputation: 2412
Here is a demo for toggle class. it might help
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
.blue {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>This is paragraph.</p>
<button>Toggle class</button>
</body>
</html>
Upvotes: 0
Reputation: 928
Hi I have figured it out i.e the cause. Its related to hierarchy of HTML elements, You are adding open class on click of li, and removing class on click of back link. But the back link is within li. So when you click on back link, jQuery first removes open class and then since li is also clicked, it adds again. Check it using alerts
$(".side-nav-toggle").click(function() {
$("body").toggleClass("side-nav-open");
});
$(".nav-level-back").click(function() {alert("Back link clicked remove class");
$(".nav-links-container").removeClass("open");
$(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {alert("Add class open");
$(".nav-links-ontainer").addClass("open");
$(this).children('div').addClass('open');
});
Upvotes: 0
Reputation: 33
$(".nav-links-container").live("click", function(){
$(this).removeClass('open');
});
Try this i hope it will work...
Upvotes: 0