JQuery выпадающее меню. держать верхний элемент выбран без пузырей - PullRequest
Новая
       6

JQuery выпадающее меню. держать верхний элемент выбран без пузырей

0 голосов
/ 03 сентября 2011

У меня есть раскрывающееся меню с фоновыми изображениями с выцветанием, выполненными с использованием диапазона, который является родственным элементом 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);
})

есть идеи, как заставить это работать?

1 Ответ

2 голосов
/ 03 сентября 2011

Если вы поместите фоновое затухание на li вместо тега a, оно все равно будет активировано при наведении курсора на пункты подменю, поскольку они находятся внутри li. Попробуйте заменить существующий код 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);
});
...