0

我试图在将鼠标悬停在 a#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>
4

1 回答 1

0

我试图在将鼠标悬停在 a#about 上时向下滑动子菜单并保持子菜单可见，直到悬停在另一个选项上

假设所有导航divs都具有 class 属性，nav并且导航链接包含在一个divornav标记中，如下所示：

<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）以外的所有 div，如果悬停的 div 不可见，则将其向下滑动，同样当导航 div 或锚不悬停时，它会在 div 之后向上滑动1 秒使用setTimeout().

请参阅演示。

于 2011-11-24T10:23:34.707 回答