Bootstrap 3 Dropdowns: on Hover and on Click

Question

Nearly all the links on my navbar are dropdowns. I would like them to appear on hover for large screens, but on click for smaller screens. Is that possible? In my search for the answer, I came across this: Bootstrap Menu: Dropdown on Hover for Desktop Only. This doesn't work for me because I don't want the entire dropdown to be invisible on mobile; I'd only like it to be visible on click instead of on hover.

Solution 1

EDITED The answer from @ouwen-huang is fine, but since jQuery is a dependency for bootstrap.js, you might as well do it the jQuery way by just adding all of the events that you want to attach to in quotes space-separated:

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

The selectors are based on the standard Bootstrap markup, taken directly from the docs like so:

<li class="dropdown">
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
    </ul>
</li>

The point here is that if you are on a mouse-enabled device like a desktop that doesn't have touch capability, then the mouseenter/mouseleave events are fired and the menu is activated without a click. If the user is not on a device that fires a mouseenter/mouseleave event then the click or tap events are fired when the person taps the link and the click or tap handler handles the dropdown toggle.

EDITED for accuracy.

Solution 2

The other 2 solutions work but don't keep the bootstrap styling. A simpler solution is to just add the 'open' class.

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

Solution 3

You can use javascript events for this.

Using the mobile check library you can say

var domObject = document.querySelector('.myClassOrIDWhateverFloatsYourBoat');
if(mobile checked is true){
    domObject.addEventListener('hover', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}else{
   domObject.addEventListener('click', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}

Solution 4

// toggle dropdown on mouse hover, click and tap events
$('.dropdown').on('mouseenter mouseleave click tap touchstart', function(event) {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).dropdown('toggle');
    }
});

Here is a slightly modified version of @jme11 's Answer based on the Bootstrap 3 documentation for Javascript Dropdowns. The advantage of using this method is that it enables the drop down to function exactly as intended without having to modify any classes and is therefore cleaner IMO.

Codepen Example

Solution 5

A nice way to achieve this is to have hover enabled only when the menu is not collapsed.

$('.dropdown').on('mouseenter mouseleave click tap', function(event) {
  if (!$('.navbar-toggle').is(':visible')) {
    $(this).toggleClass("open");
  }
});

View more solutions

Comments

[darylknight]

This solution means that when you're on a desktop, if you hover over the item, the dropdown appears. If you click on it, the dropdown disappears. When you hover over another item, it appears, and the one you clicked on also appears. The menu quickly becomes a mess.

[Stu]

I was recently searching for this exact feature and found a plugin that smartly handles Bootstrap 3 dropdown menus on desktops and mobiles: github.com/CWSpear/bootstrap-hover-dropdown

[Razvan Grigore]

This does not work correctly especially if you have more than one dropdowns, you should use $(this) instead.