如何清理我的子菜單代碼？

我想滑動一個子菜單時，鼠標懸停在＃關於並保持子菜單可見，直到懸停在另一個選項。如何清理我的子菜單代碼？

我也想隱藏子菜單，如果不是在＃about或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>

來源

2011-11-24 Raphael

你也可以發佈你的HTML，所以我們可以看到它的結構。 –

您在'nav＃about'選擇器上的'nav'之前錯過了'.'或'＃'嗎？ – fardjad

@fardjad我假設他使用的是HTML5，所以'nav'選擇器是有效的：http://html5doctor.com/nav-element/ –

我想懸停在＃當即將和保持子菜單可見，直到將鼠標懸停在另一種選擇

假設所有導航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); 
    }); 
});

它基本上結合的anchorshover事件和nav類的元素並隱藏所有nav div除了當前的div（懸停的）和slidesDown懸停的div如果不可見，也當導航div或anchor沒有懸停時，它在1秒後使用向上滑動div。

查看Demo。

來源

2011-11-24 10:23:34 fardjad

如何清理我的子菜單代碼？

回答

相關問題