Question

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

如果没有将鼠标悬停在＃约或nav＃约上，我也想隐藏子菜单。请帮助。

$(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>

Answer 1

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

假设所有导航divs都具有nav的class属性，并且导航链接包含在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和slidesDown如果它不可见，则悬停div，当导航div或锚点没有悬停时，它会在1秒后使用setTimeout()向上滑动div。

请参阅Demo。

如何清理子菜单代码？

1 个答案: