引导延迟悬停下拉菜单答案

【问题标题】：bootstrap delayed hover dropdown menu引导延迟悬停下拉菜单
【发布时间】：2016-04-02 14:12:40
【问题描述】：

我正在尝试在悬停时打开/关闭引导下拉菜单，但仅适用于桌面端的延迟为 250 毫秒。

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

这是文档中建议的正常引导结构：

<!-- 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的父类中。

【问题讨论】：

您能否也发布您正在使用的html？
但是有什么问题呢？您发布了您正在尝试做的事情和代码，但是您的问题和/或错误/问题是什么？您想要延迟或动画在下拉列表中淡出吗？
@DinoMyte 我已经添加了 HTML 结构
@salc2 抱歉，刚刚更新了问题

标签： html jquery css twitter-bootstrap drop-down-menu

【解决方案1】：

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

$(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);
        });
    });
}
});

【讨论】：