使下拉菜单在悬停时显示,并显示超时

Make dropdown menu appear on hover with a timeout

本文关键字:显示 超时 下拉菜单 悬停      更新时间:2023-09-26

我最近做了这个简单的导航,你有几个带有下拉列表的链接。首先它只在 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);
                    }  
                }  
            );  

淡入和淡出函数当前面向#generale元素中的所有ul

尝试更改

$('#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)