0

我正在尝试创建一个简单的 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>
4

2 回答 2

2

一个技巧是在鼠标仍在内部时重置计时器，并在鼠标不在时启动计时器。

$(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/

于 2012-10-11T13:56:56.027 回答
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: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

于 2012-10-11T14:00:55.983 回答