如何清理我的子菜单代码？

我想滑动一个子菜单时，鼠标悬停在＃关于并保持子菜单可见，直到悬停在另一个选项。如何清理我的子菜单代码？

我也想隐藏子菜单，如果不是在＃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

如何清理我的子菜单代码？

回答

相关问题