syed waqas
syed waqas

Reputation: 59

onclick remove class from specific div not working jquery function

$(".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&#x27;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&amp;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&amp;cm_sp=topnav-_-whatsnew-_-newseasonnow">New Season Now</a></li>
                                </ul>
                            </div>

                            <div class="col-lg-2 whats-new-product">
                                <h3 class="heading">Editor&#x27;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

Answers (3)

Krupesh Kotecha
Krupesh Kotecha

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

Gaurav Rai
Gaurav Rai

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

Mohsin Kureshi
Mohsin Kureshi

Reputation: 33

$(".nav-links-container").live("click", function(){
   $(this).removeClass('open');
});

Try this i hope it will work...

Upvotes: 0

Related Questions