Click here to Skip to main content
14,937,037 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi 

I've two navigation dashboards - top menu( header) and left navigation dashboard. Both have almost common child nav. All the code is being managed by ajax and application is a single page application. 

I want to use bind the click event for both header menu and left navigation. An active class would be add on parent li that is clicked. 

Here is some html code :


<div id="navigation">
<div class="container-fluid">
<a href="javascript:void(0)" id="brand">Logo</a>
<a href="javascript:void(0)" class="toggle-nav" rel="tooltip" data-placement="bottom" title="Toggle navigation">
<i class="icon-reorder"></i>
</a>

<ul class='main-nav'>
<li>
<a href="javascript:void(0)" name="sub-menu">
<span>Dashboard</span>
</a>
</li>
<li>
<a href="javascript:void(0)" data-toggle="dropdown" class='dropdown-toggle'>
<span>Inventory</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" name="inner-sub-menu">Style</a>
</li>
<li>
<a href="#" name="inner-sub-menu">Department</a>
</li>
<li>
<a href="#" name="inner-sub-menu">Items</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)" name="sub-menu">Order</a>
</li>
</ul>
</div>
</div>

<div id="left">
&lt;form action="search-results.html" method="GET" class='search-form'>
<div class="search-pane">
&lt;input type="text" name="search" placeholder="Search here...">
&lt;button type="submit"><i class="icon-search"></i>&lt;/button>
</div>
&lt;/form>
<div class="subnav">
<ul class="subnav-menu">
<li>
<a href="javascript:void(0)" name="sub-menu">
<span>Dashboard</span>
</a>
</li>
<li class='dropdown'>
<a href="javascript:void(0)" data-toggle="dropdown">Inventory</a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" name="inner-sub-menu">Style</a>
</li>
<li>
<a href="javascript:void(0)" name="inner-sub-menu">Department</a>
</li>
<li>
<a href="javascript:void(0)" name="inner-sub-menu">Items</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)" name="sub-menu">Order</a>
</li>
<li>
<a href="javascript:void(0)" name="sub-menu">User</a>
</li>
<li>
<a href="javascript:void(0)" name="sub-menu">Session</a>
</li>
</ul>
</div>
</div>

Jquery Code that would modefied :
JavaScript
$('.main-nav li a', '.subnav-menu li a').on('click', function(){
			$('.main-nav li, .subnav-menu li').removeClass('active');
			$(this).parent().addClass('active');
		});
$('.main-nav li ul li a, .subnav-menu li ul li a').on('click', function(){
			$('.main-nav li, .subnav-menu li').removeClass('active');
			$(this).parent().parent().parent('li').addClass('active');
			$(this).parent('li').addClass('active');
		});	


Thanks
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900