bootstrap delayed hover dropdown menu

Question

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 -->

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

But what is the problem? You posted what you are trying to do and a code but what is your question and/or error/problem? Do you want a delay or an animation fading in the dropdown? — salc2

samix73 samix73 · Accepted Answer · 2015-12-28T19:29:20

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

bootstrap delayed hover dropdown menu

1 Answers