触发多个菜单 [英] Trigger multiple menu

问题描述

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 =tooltipdata-placement =bottomtitle =Toggle navigation>

< i class =icon-reorder>< / i>

< / a>



< ul class ='main-nav'>

< li>

< a href =javascript：void（0）name =子菜单>

< span>信息中心< / span>

< / a>

< / li>

< li>

< a href =javascript：void（0）data-toggle =dropdownclass ='dropdown-toggle'>

< span>库存< / span>

< span class =caret>< / span>

< / a>

< ul class =dropdown-menu >

< li>

< a href =＃name =inner-sub-menu>样式< / 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>订单< / a>

< / li>

< / ul>

< / div>

< / div>



< div id =left>

& lt; form action =search -results.htmlmethod =GETclass ='search-form'>

< div class =search-pane>

& lt ; input type =textname =searchplaceholder =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 =子菜单>

< span>信息中心< / span>

< / a>

< / li>

< li class ='dropdown'>

< a href =javascript：void（0）data-toggle =dropdown >广告资源< / 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 hre f =javascript：void（0）name =inner-sub-menu> Items< / a>

< / li>

< / ul>

< / li>

< li>

< a href =javascript：void（0）name = 子菜单>订单< / 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代码：

<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

推荐答案

（' 。main-nav li a'，' .subnav-menu li a'）。on（' click' ， function （）{

('.main-nav li a', '.subnav-menu li a').on('click', function(){

（' .main-nav li，.subnav-menu li'）。removeClass（' active'）;

('.main-nav li, .subnav-menu li').removeClass('active');

（ this ）。parent（）。addClass（' active'）;
}）;

(this).parent().addClass('active'); });

这篇关于触发多个菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！