Как мне очистить мой код подменю? - PullRequest
Новая
       11

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

0 голосов
/ 24 ноября 2011

Я пытаюсь скользить вниз подменю при наведении курсора на # 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>

1 Ответ

0 голосов
/ 24 ноября 2011

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

Предполагая, что вся навигация divs имеет атрибут classиз 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 и скрывает все div nav, кроме текущего div (hovered) и slidesDown перемещенного div, если он не виден, также когда навигационные div или якоряне зависает, он скользит вверх по div через 1 секунду, используя setTimeout().

См. Демо .

...