Trigger multiple menu

See more:

HTML

jQuery

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 :

$('.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