我简单的jquery下拉函数有错误和故障

我正在尝试创建一个简单的jquery下拉函数，该函数将允许我在将鼠标悬停在菜单元素上时显示信息块。在这一点上，如果您鼠标过快，我到目前为止所做的是错误的和故障的。此外，下拉列表似乎仅在将鼠标悬停在元素上时才保持可见，而不是在其子元素上。

也许有人可以快速浏览一下代码并建议如何实现某种标志，这样菜单就不会轻易消失，也不会在多个鼠标悬停器上出现故障。

你可能会问为什么我不通过纯 css 来做这件事，不幸的是我需要较旧的浏览器支持，并且更喜欢将其包装为一个函数。

JSBIN： http://jsbin.com/inedoy/1

这是代码：

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        border-bottom:1px solid #ddd;
    }
    .dropdown {
        display:none;
        position:absolute;
        width:200px;
        border:1px solid #ddd;
        padding:20px;
        top:40px;
        left:0;
    }
</style>
</head>
<body>
<ul>
    <li class="drop">Some link
        <div class="dropdown">
            <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>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>
        </div>
    </li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
dropdown('.drop','.dropdown');
function dropdown(hoverElement,toShow){ 
    $(hoverElement).hover(function(){                       
        $(toShow).stop().slideDown();                   
    },function(){       
        setTimeout(function(){
            $(toShow).stop().hide();    
        },300);     
    });
}
</script>
</body>
</html>

一个技巧涉及在鼠标仍在内部时重置计时器，并在鼠标关闭时启动计时器。

$(function() {
  var myTimer;
  $(document).on("mouseenter", ".drop", function() {
    parent = this;
    // Close the other dropdowns except this one..
    $(".drop").not(parent).find(".dropdown").hide();
    // Show dropdown
    $(".dropdown", parent).show();
    // Clear the timer so it doesnt close.
    clearTimeout(myTimer);
   }).on("mouseleave", ".drop", function() {
    parent = this;
    // Start the timer
    myTimer = setTimeout(function(){
        $(".dropdown").hide();
    },560)
  });
});

演示：http://jsbin.com/inedoy/42/

对代码进行了一些更改：

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        border-bottom:1px solid #ddd;
    }
    .dropdown {
        display:none;
        position:absolute;
        width:200px;
        border:1px solid #ddd;
        padding:20px;
        top:25px;
        left:0;
    }
  .drop
  {
    /*border: 1px solid;*/
  }
</style>
</head>
<body>
<ul>
    <li class="drop">Some link
            <ul class="dropdown">
                <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>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>
  </li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
dropdown('.drop','.dropdown');
function dropdown(hoverElement,toShow)
  { 
    var intervalId = 0, sliding= false;
    $(hoverElement).hover(function()
    {                       
        clearTimeout(intervalId);
        if(!sliding)
        {
          sliding = true;
          $(toShow).stop().slideDown( function(){sliding = false;});                        
        }
    },function(){       
        intervalId = setTimeout(function()
        {
            sliding = false;
            $(toShow).stop().hide();    
        },300);     
    });
}
</script>
</body>
</html>

http://jsbin.com/inedoy/36/edit

相关内容

最新更新

热门标签：