个人中心
gpt4 book ai didi

javascript - 我简单的 jquery 下拉功能有问题和故障

转载 作者：太空宇宙 更新时间：2023-11-04 00:11:35 26 4
gpt4 key购买 nike

我正在尝试创建一个简单的 jquery 下拉函数，它可以让我在悬停在菜单元素上时显示信息 block 。在这一点上，如果您将鼠标悬停得太快，我到目前为止所做的就会出现错误和故障。此外，下拉菜单似乎仅在将鼠标悬停在元素上而不是在其子元素上时保持可见。

也许有人可以快速查看代码并建议如何实现某种标志，这样菜单就不会轻易消失，也不会在多次鼠标悬停时出现故障。

你可能会问为什么我不用纯 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/

关于javascript - 我简单的 jquery 下拉功能有问题和故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12840042/

26 4 0
文章推荐： python GC - 引用计数仅在 gc.collect() 时有效？
文章推荐： node.js - 使用 Jasmine 测试 Nodejs 中的事件
文章推荐： C:为什么额外的分号可以？
文章推荐： css - 在 Rails 中使用时间轴
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com