+(function ($) { "use strict"; var $window = $(window); var $document = $(document); var open = false; var $navbar = $('.navbar-nav'); var bsEventName = 'click.bs.dropdown.data-api'; var bsDropdown = $.fn.dropdown.Constructor; var bsClickHandler = bsDropdown.prototype.toggle; $navbar.on('mouseenter mouseleave', '.dropdown', dropdownHandler); function dropdownHandler(evt) { if (evt.type === 'mouseleave') { $navbar.find(':focus').blur(); } evt.preventDefault(); open = evt.type === 'mouseenter'; $(this).find('[data-toggle=dropdown]').trigger(bsEventName); if (open) { $document.off(bsEventName, toggle, bsClickHandler); } else { $document.on(bsEventName, toggle, bsClickHandler); } return false; } })(window.jQuery);
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>