Question

我知道这个问题已被多次询问，但我不能让我的下拉菜单与我到目前为止的工作。如果我设置延迟显示菜单，没有setTimeout菜单工作正常就会出现问题。任何人都可以看看并建议解决方案吗？我也在尝试在IE6中运行。

以下是setTimeout的完整示例： http://jsbin.com/owoyon/1/（有问题，无法正常工作，下拉卡住，延迟无法识别）
这是一个没有setTimeout的工作版本 http://jsbin.com/isamay/1/

这是一个代码副本：

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">

<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul,ul ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        margin:0 10px;
        cursor:pointer;
        border-bottom:1px solid #ddd;
        display:inline-block;
        float:left;     
    }
    .submenu {
        background:#eee;
        display:none;
        position:absolute;
        width:200px;        
        top:25px;
        left:0;
        margin-left:-5px;
    }
    .hover {
        display:block !important;
    }
</style>
</head>
<body>

<nav id="navigation">
<ul>
    <li class="drop">Option 1
        <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>          
        </div>
    </li>
    <li class="drop">Option 2
    <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>          
        </div>
    </li>
</ul>
</nav>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

    (function(){

        var topNav = $('#navigation'),
            drop = topNav.find('.drop'),
            myTimer;                

        drop.hover(function(){                  
            obj = $(this);                      
            subMenu = obj.find('.submenu');         
            subMenu.addClass('hover');  
            clearTimeout(myTimer);              
        },function(){
            myTimer = setTimeout(function(){                
                subMenu.removeClass('hover');   
            },300);                                             
        });     

    })();   

});



</script>

</body>
</html>

Answer 1

我能够解决这个问题。在这里演示http://jsbin.com/owoyon/3/edit

var topNav = $('#navigation'),
    drop = topNav.find('.drop'),
    myTimer;

drop.hover(function () {
    var obj = $(this);
    var subMenu = obj.find('.submenu');
    clearTimeout(myTimer);
    if (subMenu.hasClass('hover')) {
        //do nothing
    } else {
        drop.find('.submenu').removeClass('hover');
        subMenu.addClass('hover');
    }
}, function () {
    myTimer = setTimeout(function () {
        drop.find('.submenu').removeClass('hover');
    }, 300);
});

Answer 2

我修改了你的JS代码并尝试了这个

var topNav = $('#navigation'),
            drop = topNav.find('.drop'),
            myTimer, subMenu;                

$('#navigation .drop').each(function(){
    var obj = $(this);
    obj.hover(function(){

        subMenu = obj.find('.submenu');
        subMenu.addClass('hover');
    },function(){
            myTimer = setTimeout(function(){                
                obj.find('.submenu').removeClass('hover');    
            },300);                                                   
     });
})

DEMO：http://jsfiddle.net/bvhk2/1/

带有setTimeout的jQuery下拉菜单不起作用

2 个答案: