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的前一个兄弟的范围内消失。另外如果里面有一个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标签上，当您将鼠标悬停在子菜单项上时，它仍会被激活，因为它们位于{{1}内}}。尝试使用以下代码替换现有的jQuery代码：

li

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

1 个答案: