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.

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

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