Question

我正试图冲倒一个小的菜单,然后把小菜 visible放在一边,直到把另一个选择隔开。

我也想掩盖子菜单,如果它不 over在一只#或 n子上。帮助请。

$(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();
    });
});

========================================= edited to include the 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

I am trying to slide down a sub menu when hovering over a#about and keep the sub menu visible until hovering over another option

假设所有导航<代码>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 >>> 条码和<条码>部分。类别和隐藏所有<代码>nav divs,但目前的四分(被 h)和滑坡除外。如果四舍五入,则将四舍五入至四舍五入至四舍五入,则在四舍五入后采用<>代码>准时射线(<>>>>。

见。

友情链接