使下拉菜单出现在悬停时超时答案

【问题标题】：Make dropdown menu appear on hover with a timeout使下拉菜单出现在悬停时超时
【发布时间】：2012-06-26 17:39:47
【问题描述】：

我最近做了这个简单的导航，您可以在其中有几个带有下拉菜单的链接。首先它仅在 CSS3 中，但后来我决定添加一些 jQuery 以使下拉列表在一定时间后出现。（大部分 jQuery 代码是基于另一个线程中给出的答案）

基本上，我的问题是我无法定位正确的悬停元素，因此当我悬停一个 li 元素时，我的所有下拉菜单都会显示。我尝试尽可能多地对其进行调整，但找不到合适的代码。

非常感谢任何回复！

我的菜单如下所示：

<ul id="generale">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li>
                    <a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Subitem 1</a></li>
                        <li><a href="#">Subitem 2</a></li>
                        <li><a href="#">Subitem 3</a></li>
                        <li><a href="#">Subitem 4</a></li>
                        <li><a href="#">Subitem 5</a></li>
                    </ul>     
                </li>
                <li>
                    <a href="#">Item 4</a>
                    <ul>
                        <li><a href="#">Subitem 1</a></li>
                        <li><a href="#">Subitem 2</a></li>
                        <li><a href="#">Subitem 3</a></li>
                        <li><a href="#">Subitem 4</a></li>
                        <li><a href="#">Subitem 5</a></li>
                    </ul>  
                </li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
            </ul>

还有我的 jQuery：

var navTimers = [];  
            $( "#generale > li" ).hover(
                function () {  
                    var id = jQuery.data( this );  
                    var $this = $( this ); 

                    navTimers[id] = setTimeout( function() {  
                        $('#generale ul').fadeIn(200); 
                        navTimers[id] = "";  
                    }, 300 );  
                },  
                function () {  
                    var id = jQuery.data( this );  
                    if ( navTimers[id] != "" ) {  
                        clearTimeout( navTimers[id] );  
                    } else {  
                        $('#generale ul').fadeOut(200);
                    }  
                }  
            );

【问题讨论】：

你为什么不把一个类添加到你需要删除的 li 中，然后定位那个类。其实看了你的代码后，你的菜单的显示和隐藏是针对ul而不是li

标签： javascript jquery drop-down-menu navigation timeout

【解决方案1】：

您的fadeIn 和fadeOut 函数目前针对#generale 元素内的所有uls。

尝试改变

$('#generale ul').fadeIn(200);

到

$this.find('ul').fadeIn(200);

和

$('#generale ul').fadeOut(200);

到

$this.find('ul').fadeOut(200); // you'll also have to define $this = $(this)

【讨论】：