我目前正在尝试使用JQuery创建一个“mega”辍学菜单,但遇到了一个我尚未能解决的问题。目前我有以下HTML结构:
<div id="TopNav" class="grid_16">
<ul class="cmsListMenuUL level0" id="TopNavMenu">
<li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/">
<span class="text">Home</span></a></li>
<li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink">
<span class="text">Key Sectors</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink">
<span class="text">Global Brands</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink">
<span class="text">News & Features</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink">
<span class="text">Videos</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink">
<span class="text">Events</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink">
<span class="text">Key Cities</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx"
class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink">
<span class="text">How We Can Help</span></a></li>
<li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink">
<span class="text">Contact Us</span></a></li>
</ul>
</div>
<div class="sectorsDropped">
<div class="floatLeft leftColumn">
<div class="parentItem" style="border-color: #0064BE;">
<a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent">
Advanced Engineering & Materials</a><div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div>
<div class="childItem">
<a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx">
- Logistics & Infrastructure</a></div>
</div>
<div class="parentItem" style="border-color: #FFB611;">
<a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div>
<div class="parentItem" style="border-color: #B7CC0B;">
<a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon
Capture & Storage</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div>
<div class="childItem">
<a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div>
</div>
</div>
<div class="floatLeft rightColumn">
<div class="parentItem" style="border-color: #AC26AA;">
<a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &
New Media</a></div>
<div class="parentItem" style="border-color: #e1477e;">
<a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food & Drink</a></div>
<div class="parentItem" style="border-color: #00c5b5;">
<a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare
Technologies</a><div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div>
<div class="childItem">
<a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div>
</div>
<div class="parentItem" style="border-color: #AC1A2F;">
<a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial
& Professional</a></div>
</div>
</div>
在正常情况下,包含“mega”菜单选项的div将位于激活show / hide的li项目内,但目前这是不可能的,因为导航链接的ul列表是使用第三方软件渲染的,没有为我提供等效的OnItemDataBound事件,以便能够将div注入项目
有没有人知道使用JQuery的方式显示div但是保持div的显示,因为鼠标焦点离开原来显示div的li并实际进入div?
我目前正在使用以下JQuery正确显示div但是当鼠标焦点进入div时,div会随着li中的鼠标焦点移动而消失:
$(document).ready(function() {
function addMega(){
$(".sectorsDropped").toggle("fast");
}
function removeMega(){
$(".sectorsDropped").toggle("fast");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("#TopNavMenu_0_1").hoverIntent(megaConfig)
});
由于
戴夫
答案 0 :(得分:0)
显示或隐藏鼠标上下的div 试试这个
$("menubutton").mouseover(function(){
$("#submenudiv").show();
}).mouseout(function(){
$("#submenudiv").hide();
});
对不起,我没有完全阅读你的帖子(这是非常冗长的),但是因为你正在尝试创建一个超级下拉菜单,为什么不尝试这个菜单。
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
示例:
<ul>
<li>
<a href="#">Link 1</a>
<ul class="submenu">
<li>Sub Link 1</li>
<li>Sub Link 1</li>
</ul>
</li>
</ul>