JQuery Hover li Show div位于li结构外部

Question

我目前正在尝试使用JQuery创建“大型”退出菜单，但是遇到了我尚无法解决的问题。 目前，我具有以下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将位于可触发显示/隐藏的li项目内，但是当前无法实现，因为导航链接的ul列表是使用第三方软件提供的，该软件未提供等价于OnItemDataBound事件，以便我能够将div注入到项目中

有谁知道使用JQuery显示div但保持div显示的方法，因为鼠标焦点离开了原来显示div并实际上进入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>