我有一个基于Bootstrap构建的菜单,并且已经编写了一个用jQuery创建下拉菜单的代码;以下是HTML和jQuery部分:
我希望在离开#menu-menu-1容器或悬停在其他项目上时删除open类,但目前我还没有找到方法。
这里是示例:http://jsfiddle.net/7eay9eo0/
<nav id="main-nav" class="collapse navbar-collapse pull-right" role="navigation">
<ul id="menu-menu-1" class="nav navbar-nav">
<li class="active menu-home"><a href="index.html">Home</a>
</li>
<li class="dropdown menu-sectors"><a class="dropdown-toggle" href="sectors.html">Sectors</a>
<ul class="dropdown-menu">
<li class="menu-domestic"><a href="sectors/domestic/index.html">Domestic</a>
</li>
<li class="menu-industrial"><a href="sectors/industrial/index.html">Industrial</a>
</li>
<li class="menu-commercial"><a href="sectors/commercial/index.html">Commercial</a>
</li>
<li class="menu-public-sector"><a href="sectors/public-sector/index.html">Public Sector</a>
</li>
</ul>
</li><li class="dropdown menu-facilities"><a class="dropdown-toggle" href="facilities.html">Facilities</a>
<ul class="dropdown-menu">
<li class="menu-energy-anlysis"><a href="facilities/energy-anlysis/index.html">Energy Analysis & Reporting</a>
</li>
<li class="menu-billing-analysis"><a href="facilities/billing-analysis/index.html">Billing Analysis & Procurement</a>
</li>
<li class="menu-Site-design"><a href="facilities/site-design/index.html">Site Analysis & System Design</a>
</li>
<li class="menu-software-backup"><a href="facilities/software-backup/index.html">Software & Systems Backup</a>
</li>
<li class="menu-hardware-controls"><a href="facilities/hardware-controls/index.html">Hardware & Controls</a>
</li>
<li class="menu-thermography"><a href="facilities/thermography/index.html">Thermography</a>
</li>
<li class="menu-pat-testing"><a href="facilities/pattesting/index.html">PAT Testing</a>
</li>
</ul>
</li><li class="dropdown menu-technologies"><a class="dropdown-toggle" href="technologies/index.html">Technologies</a>
<ul class="dropdown-menu">
<li class="menu-software-backup"><a href="facilities/software-backup/index.html">Software & Systems Backup</a>
</li>
<li class="menu-hardware-controls"><a href="facilities/hardware-controls/index.html">Hardware & Controls</a>
</li>
<li class="menu-r-d"><a href="facilities/r-d/index.html">Research & Development</a>
</li>
</ul>
</li><li class="menu-news"><a href="news/index.html">News</a>
</li>
<li class="menu-about-us"><a href="about-us/index.html">About Us</a>
</li>
<li class="menu-contact-us"><a href="contact-us/index.html">Contact us</a>
</li>
</ul>
</nav>
JQuery部分
+ function ($) {
"use strict";
$('.dropdown').on('mouseenter',function() {
$(this).addClass('open');
$(this).prev('li.dropdown').removeClass('open');
$(this).next('li.dropdown').removeClass('open');
});
$('#menu-menu-1').on('mouseleave', function () {
//remove the open class here
});
}(window.jQuery)
我希望在离开#menu-menu-1容器或悬停在其他项目上时删除open类,但目前我还没有找到方法。
这里是示例:http://jsfiddle.net/7eay9eo0/
$('.open').removeClass('open')
? - Ben