add/remove class on click, navigation li item

I was trying to find solution but i can't, every single code wasn't good for my project. Here is navigation structure

<nav> <ul class="menu"> <li> <ul class="submenu"> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </li> <li> <ul class="submenu"> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </li> <li></li> <li></li> </ul> </nav>

$(".menu li").click(function(){ $(this).toggleClass("visible"); }); $('body').click(function(){ if( $(".menu li").hasClass("visible") ){ $(".menu li").removeClass("visible"); }; });

What a want to achieve is next:

  • When i click on .menu li to add class active
  • When i click on another .menu li item or on .submenu li a, remove class active from another li item that has that class
  • And also when i click anywhere else (example body) also remove class from .menu li

I hope you understand what i want. Sorry for my bad grammar

Update:

Toggle Solution

Modified code by: @Sasa Novakovic (thank you again bro :) )

function removeActiveMenuClass(active_element){ $('.menu li').not(active_element).removeClass('visible'); } $( '.menu>li' ).click(function(e) { e.stopPropagation(); var $_this = $(this); removeActiveMenuClass($_this); if ($_this.hasClass('visible')) { $_this.removeClass('visible'); } else { $_this.addClass('visible'); } }); $('body').click(function() { removeActiveMenuClass(); });

-------------Problems Reply------------

Here is the code for you jsfiddle.

$('html').click(function() {
removeActiveMenuClass();
});

$( '.menu>li, .submenu>li' ).click(function(e) {
e.stopPropagation();
removeActiveMenuClass();
$(this).addClass('active');
});

function removeActiveMenuClass(){
$('.menu li').removeClass('active');
}

Try adding this snippet to your HTML:

<script>
var options = $('.menu').find('li');
options.onclick(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('*').not(options).click(function(){$('.active').removeClass('active')});
</script>

$('.submenu li').click(function(){
$('.submenu li').removeClass('addclass');
$(this).addClass('addclass');
})
$(document).mouseup(function(){
$('.submenu li').removeClass('addclass');
})

.addclass{
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>
<ul class="submenu">
<li><a>submenu1</a></li>
<li><a>submenu2</a></li>
<li><a>submenu3</a></li>
<li><a>submenu4</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>submenu1</a></li>
<li><a>submenu2</a></li>
<li><a>submenu3</a></li>
<li><a>submenu4</a></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
</nav>

Category:javascript Views:5 Time:2019-01-03

Related post

  • Better way to add/remove classes on click 2012-02-01

    I have two links, ".sp" and ".sl" when you click they change the visibility of some content ("#live") and ("#paid"), a low level type of tab interface i guess. I ad a class of 'active' on click and remove the class on the other link if it had it. Thi

  • JQuery add / remove class on click for tabs using Twig as template 2011-03-29

    I have a tabbed widget that is dynamically populated by Weed/Month/Year, I need to make the correct tab show on click and hide the others. Jquery: $("#tab1").click(function(){ $("#tab1").removeClass("notactive").addClass("active"); $(this).addClass("

  • jquery add remove class onclick 2011-08-21

    i have any navigation menu ! <div class="nav"> <ul class="navigation"> <li class="selected"><a href="#">HOME</a></li> <li><a href="#">PROFILE></a></li> <li><a href="#">CONTACT

  • add/remove class at same time in java script (php module) 2012-01-27

    i am developing a module in PHP and i need to add/remove class at the same time using event onclick in javascript. Please suggest. Below is the code but it is not working, jQuery("#cat-block-id").show(); //jQuery("#product-block-id").hide(); jQuery("

  • Add / Remove Class when scroll to an ID in the mid 2014-05-09

    I have a website in twitter bootstrap with top fixed navigation. I have two navigations, one is on top and other one is in mid. Top one have a fixed position but requirements are when we scroll to mid and reached to mid navigation, add fixed class to

  • jQuery - Add a class on click, remove it on Hover 2010-03-09

    I've got a simple jquery menu set up... it works fine except for the parent item. I've only listed one parent item, but there may be many, so raw #id won't work for this either. I want to apply a class when it is CLICKED, but then remove that class w

  • click .toggle add/remove class 2010-04-27

    When i click #tool I want to add the class .spanner to the div #drill. However when #drill has the class .spanner and #tool is clicked i want the class to be removed? --------------Solutions------------- Use the toggleClass function: $("#tool").click

  • Jquery Add/remove Class of seperate div on click 2011-07-01

    #bottomToolbar #facet-container #tb-facets .info-toolbar #rv-active { position:relative; } .tb-1-5 { display:none; } <div id="bottomToolbar"> <div id="facet-container"> <ul id="tb-facets"> <li class="info-toolbar"> <a id="i

  • Add and remove class on click 2011-08-16

    I have a tab menu, and i want onlick be be added a class="selected" - and on click on one of the other tabs, the class should be removed from the current link, and then be added to the link i've clicked on... I've tried this but didnt work $('.tab-li

  • Jquery script issue IE7 add/remove class 2009-10-30

    I'm having some IE7 (and presumably IE6) issues with the script. <script type="text/javascript"> $(document).ready(function(){ $(".testimonial:first").show(); $("li.testID:first").addClass("selectedName"); $("li.testID").click(function(){ $("li

  • Add/Remove Class - Custom Pagination 2011-02-02

    I am trying to create a click event that will capture: What the current page # is (based on current class) What the next page will be (I can use next()) Also I am trying to get my "selected" class to add/remove based on the page you're on. If you're

  • jQuery add/remove class using 'this' 2014-09-16

    I'm trying to append a class to a div when its click and remove when its clicked a second time I currently have this has my script - $(".project").click(function(){ if ($(".project-expand", this).is(':visible')) { $(".project-expand",this).hide(1000)

  • jquery add remove class 2010-02-11

    I have 4 anchors, I want to add a class of current to an anchor as it is clicked and remove the class from the other 3 at the same time. Here's my code. what am I doing wrong? if ($("ul#thumb a").hasClass("current") { $("ul#thumb a").removeClass("cur

  • jQuery remove class on .click 2010-08-13

    Here is my html: <a href="#">Read more</a> <div class="moreDetails"> <p class="additionalText">Some text help here, random length.</p> <p class="author"> <span class="bolder"><a href="minidashboard.php?use

  • Add/remove class of tag when other child links are hovered over 2010-09-07

    When I hover over the parent links in my menu the class "toggle-active" is added to a span tag so the arrow image is changed. I also want this class to be added to the span tag when I'm hovering over the child links of the parent link inside the .sub

  • jquery - how to add/remove class on slideToggle? 2010-10-31

    I would like to each time the div expands, to add the class 'selecionado' once the expansion is finished. When the contraction is done (the slideUp part) I would like to remove this class. Can I have a help here please? $('#btCategoriaA').click(funct

  • Dynamic Add/Remove Class Jquery 2011-05-20

    I am creating an autosuggest box that has a of suggestion returned to it, and I am trying to add/remove the class "searchsuggestinnerulhighlight" to individual links. Here is the dynamically returned ta <DIV id="searchsuggestinner"> <UL id=s

  • jquery add a class to $('').click(function(){-}) 2011-07-21

    How can I add a class to tags such as a & span in these examples: $('<a/>').click(function(){...}) $("<span/>").text(chars.substr(0, limit-1)); ================= Here is the full script. It adds spans and a tags to portions of text. I

  • jQuery Add / remove class on nav 2011-07-28

    How can I create different classes on my links so they can show different images when you click on them? The idea is that the links has its own color and when it is active there must be a little arrow with the same color. This is what I have so far:

  • jquery add/remove class and event 2014-04-02

    Okay so, i have a list with class "active" on each LI element. <ul class="mylist"> <li class="active">Myval1</li><li class="active">MyVal</li>... </ul> And i want onclick on any of those li elements to change its c

  • Add remove class functionality in javascript 2014-04-09

    I am making a add or remove class functionality in javscript but it is not working. here is my code... if (window.location.hash == "#/profile/"){ document.getElementById("tabMenu").removeClass("bottomTabs").addClass("hidden"); } else{ document.getEle

  • jquery add/remove class of multiple elements outside of parent div 2014-05-09

    I know there will be a simple way to accomplish this, just struggling to get my head around it. So I have one parent div that holds multiple divs that need an open class attributed to them if a div that is outside the parent div is clicked. Will try

  • JQuery - How to add a class to every last list item? 2009-02-19

    Got some code here that isn't working: $("#sidebar ul li:last").each(function(){ $(this).addClass("last"); }); Basically I have 3 lists and want to add a class (last) to each item appearing last in each unordered list. <ul> <li>Item 1<

  • How can I set the class for an element using jQuery? Don't want to add/remove classes 2011-04-27

    I need to set the class for an element in my page. With plain JavaScript, I would write something like: document.getElementById('foo').className = "my_class"; This just sets the class, which is exactly what I want. But I'm using jQuery on my page and

  • Remove class on click anywhere, unless a certain textbox is clicked on 2011-07-27

    I am trying to improve the following script a little: $(document).click(function(event) { $('.home.active').click(); $('.home').removeClass("active"); }); This works, but it works when I don't want it to work. For example, I have a textbox. If that t

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.145 (s). 11 q(s)