jquery 下拉菜单。保持选择顶部项目而不冒泡

Question

我有一个下拉菜单，其中有淡入淡出的背景图像，通过具有 a 的同级跨度并具有父 li 的完整尺寸来完成。 html和css如下。

    <div id='header'>
    <ul>
    <li><span></span><a href='#' title='' class='a1'>Pianos</a>
        <ul>
        <li><span></span><a href='#' title='' class='a1'>New</a></li>
        <li><span></span><a href='#' title='' class='a1'>Used</a></li>
        </ul>
    </li>
    <li><span></span><a href='#' title='' class='a1'>Accessories</a></li>
    <li><span></span><a href='#' title='' class='a1'>Locations</a></li>
    <li><span></span><a href='#' title='' class='a1'>Contact</a></li>
</ul>
    </div>

    *
    {
            margin:0px;
            padding:0px;
            position:relative;
    }
    #header>ul li
    {
        display:inline-block;
        margin-left:-4px;
        width:150px;
        height:100%;
        border-right:2px solid #000000;
        text-align:center;
    }
    #header>ul li>a
    {
        display:block;
        padding-top:5px;
    }
    #header>ul li>span
    {
        display:block;
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background:url('naviOn.jpg');
        display:none;
   }
   #header>ul>li>ul
   {
       display:none;
       position:absolute;
       top:40px;right:0px;
       background:url('naviOff.jpg');
   }
   #header>ul>li>ul>li
   {
       border:none;
       height:40px;
   }

我的 jquery 所做的是它在您悬停的 a 的前一个兄弟跨度中淡入淡出。另外，如果 li 里面有 ul，它会向下滑动。我遇到的问题是当我将鼠标悬停在下拉元素上时使顶部跨度保持不变。目前它可以工作，但如果我仅将鼠标悬停在顶部元素上，则跨度将保持隐藏状态，直到我将鼠标悬停在下拉锚点上。 jquery代码如下。

    $('#header>ul a').hover(function()
{
    $(this).prev('span').stop(true, true).fadeToggle(500);
}, function()
{
    $(this).prev('span').stop(true, true).fadeToggle(500);
})
$('#header>ul>li').hover(function()
{
    $(this).children('ul').stop(true, true).slideToggle(250);
    $(this).children('span').css({display: 'block'});
},function()
{
    $(this).children('ul').stop(true, true).slideToggle(250);
    $(this).children('span').fadeOut(500);
})

关于如何让它发挥作用有什么想法吗？

Answer 1

如果您将背景淡入淡出放在 li 上而不是放在 a 标记上，当您将鼠标悬停在子菜单项上时，它仍然会被激活，因为它们位于李。尝试用以下代码替换现有的 jQuery 代码：

$('#header li').hover(function()
{
    $(this).children('span').stop(true, true).fadeToggle(500);
    $(this).children('ul').stop(true, true).slideToggle(250);
    $(this).children('span').css({display: 'block'});
},function()
{
    $(this).children('span').stop(true, true).fadeToggle(500);
    $(this).children('ul').stop(true, true).slideToggle(250);
    $(this).children('span').fadeOut(500);
});