Как очистить код подменю?

Я пытаюсь сдвинуть подменю вниз при наведении курсора на # about и держать подменю видимым до тех пор, пока не наведу курсор на другой параметр.

Я также хочу скрыть подменю, если не зависаю над #about или nav#about. Помогите, пожалуйста.

$(document).ready(function () {
    $('a#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('nav#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('a#home').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#products').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#contact').hover(function(){
        $('nav#about').slideUp();
    });
});

======================================= отредактировано, чтобы включить html

<nav id="main" class="left">
    <a id="home" class="left active">Home</a>
    <a id="about" class="left" href="#">About</a>
    <a id="products" class="left" href="#">Products</a>
    <a id="contact" class="left" href="#">Contact</a>
</nav>

<nav id="about" class="left">
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
</nav>

jquery code-cleanup
person Raphael    schedule 24.11.2011    source источник
comment
Не могли бы вы также опубликовать свой HTML, чтобы мы могли увидеть, как он структурирован.   -  person Rory McCrossan    schedule 24.11.2011
comment
Вы пропустили . или # перед nav на селекторе nav#about?   -  person fardjad    schedule 24.11.2011
comment
@fardjad Я предполагаю, что он использует HTML5, поэтому селектор nav будет действительным: html5doctor.com/nav-element   -  person Rory McCrossan    schedule 24.11.2011
comment
@RoryMcCrossan Вот почему я спросил did you miss it.   -  person fardjad    schedule 24.11.2011
comment
Спасибо Рой и Фарджад. Я отредактировал свой пост, чтобы включить HTML. На самом деле это очень просто, что я пытаюсь сделать, но мой код неверен.   -  person Raphael    schedule 24.11.2011
comment
@RaphaelSundar Вы используете идентификаторы, которые повторяются на вашей странице, это должно быть только один раз на странице, поэтому вы должны изменить идентификатор навигации на что-то другое.   -  person MacMac    schedule 24.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

Я пытаюсь сдвинуть подменю вниз при наведении курсора на # about и держать подменю видимым до тех пор, пока не наведу курсор на другой параметр.

Предположим, что вся навигация divs имеет атрибут класса nav, а навигационные ссылки заключены в теги div или nav следующим образом:

<div id="navigation">
    <a id="about" ...>About</a>
    <a id="home" ...>Home</a>
    <a id="products" ...>Products</a>
    <a id="contact" ...>Contact</a>
    <div class="nav" id="div-about" ...>...</div>
</div>

вы можете сделать что-то вроде этого:

var menuTimeout;
$('#navigation a, #navigation .nav').hover(function() {
    hovered_div = $('#navigation #' + 'div-' + $(this).attr('id').replace('div-',''));
    $('#navigation .nav').not(hovered_div).hide();
    (hovered_div.css('display') == 'none') && hovered_div.slideDown();
    clearTimeout(menuTimeout);
}, function() {
       menuTimeout = setTimeout(function() { $('#navigation .nav').slideUp(); }, 1000);
   });
});

Он в основном привязывается к событию hover anchors и элементам класса nav и скрывает все nav div, кроме текущего div (наведенного) и слайдовDown наведенного div, если он не виден, а также когда навигационные div или привязки не наведены, он скользит поднять div через 1 секунду, используя setTimeout().

См. демонстрацию.

person fardjad    schedule 24.11.2011