引导程序延迟悬停下拉菜单 [英] bootstrap delayed hover dropdown menu

问题描述

我正在尝试在悬停时打开/关闭引导下拉菜单，但仅在桌面上延迟 250 毫秒.

I'm trying to make a bootstrap dropdown menu open/close on hover, but with a delay of 250ms for desktop only.

JavaScript:

$(document).ready(function() {
    if ($(window).width() > 767) {
        $(".dropdown-toggle").click(function() {
            return false;
        });

        var hoverTimeout;
        $(".dropdown-toggle, .dropdown-menu").hover(function() {
            hoverTimeout = setTimeout(function(){
                $(this).parent(".dropdown").addClass("open");
            }, 250);
        },function() {
            clearTimeout(hoverTimeout);
            setTimeout(function() {
                $(this).parent(".dropdown").removeClass("open");
            }, 250);
        });
    }
});

HTML

这是文档中建议的正常引导程序结构:

It's the normal bootstrap structure suggested in the documentation:

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="happyMenu">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle"
               data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="false">
                Title
            </a>
            <ul class="container dropdown-menu">
                <li>
                    <a href="#">
                        List Title
                    </a>
                    <ul>
                        <li>
                            <a href="#">
                                List Item
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div><!-- /.navbar-collapse -->

上面的 jQuery 代码没有将 open 类添加到 dropdown-toggle 的父类.

The jQuery code above does not add the open class to the parent of dropdown-toggle.

推荐答案

这是我使用 JavaScript setTimeout 想出的解决方案，HTML 结构没有变化:

Here is the solution I came up with using JavaScript setTimeout with no changes in HTML structure:

$(document).ready(function() {
if ($(window).width() > 767) {
    $(".dropdown-toggle").click(function() {
        return false;
    });
    
    var hoverTimeout;
    $(".dropdown-toggle").hover(function() {
        var element = $(this).parent(".dropdown");
        hoverTimeout = setTimeout(function(){
            element.addClass("open");
        }, 250);
    },function() {
        clearTimeout(hoverTimeout);
        var element = $(this).parent(".dropdown");
        hoverTimeout = setTimeout(function() {
            element.removeClass("open");
        }, 250);
        
        $(".dropdown-menu").hover(function(){
            clearTimeout(hoverTimeout);  
        },function(){
            setTimeout(function() {
                element.removeClass("open");
            }, 250);
        });
    });
}
});

这篇关于引导程序延迟悬停下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！