user3032273
Reputation: 7
How to add nav-active class in in navigation using jquery only one time
Please help me to sort out this problem. I want to add nav-active class in li element only one time means if child element is selected then parent li should not have nav-active class. I am using following code but it is not working according to my requirements.
Thanks in advance.
Here is my code:
$('ul li').find('li').click(function(){
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li
></ul>
</nav>Upvotes: 0
Views: 1109
Answers (2)
Deep
Reputation: 9794
In you current example if you will do a console.log($(this), it will show you 2 elements in the console if you have clicked a child element. One for the child element and one for its parent li element. This is called event bubbling. You need to take care of event bubbling by stop propagating the event.
Try this.
$('li').click(function(event){
event.stopPropagation()
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});.nav-active a
{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li
></ul>
</nav>Upvotes: 1
ab29007
Reputation: 7766
The main idea is to run the click function only once because when you click child element the parent element also gets clicked automatically right after that so $(this) ends up selecting parent item, everytime the child element gets clicked.
I added css for .nav-active class to show the code working. Try this.
$(document).ready(function(){
$('nav li').one("click",function(){
$('nav li').removeClass('nav-active');
$(this).addClass('nav-active');
})
}).nav-active>a>span{
font-size:20px;
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li
></ul>
</nav>Upvotes: 0
Related Questions
- How to add active class to div in a nav list using jQuery
- How to set active class on current nav item
- Add 'active' class to navigation links de
- dynamically apply active class to nav li
- Adding active class to current page in nav with jQuery
- Add .active class to navigation when you're on the corresponding page
- Navigation have an active class working
- jQuery - add navigation active class on parent
- jQuery Navigation add active class
- Adding an active css class to navigation with jQuery