I am experimenting with creating a bootstrap dropdown menu that opens and closes on hover, but only after a 250ms delay for desktop devices.
Custom 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 Structure:
The structure follows the standard bootstrap format as outlined 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 provided jQuery code does not correctly apply the "open" class to the parent element of the "dropdown-toggle".