Question

我目前正在尝试使用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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp;
                New Media</a></div>
        <div class="parentItem" style="border-color: #e1477e;">
            <a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food &amp; 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
                &amp; 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)


});

由于

戴夫

Answer 1

显示或隐藏鼠标上下的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>

JQuery Hover li显示位于li结构之外的div

1 个答案: