How to Close Bootstrap 3 Dropdown When We Click Outside on a Tablet

How to close bootstrap 3 dropdown when we click outside on a tablet?

You should use the touchstart and touchend events with touch devices:

$(document).on("click touchend", function(){
    $(".dropdown-toggle").removeClass("open");
});

Avoid dropdown close on clicking outside

Bootstrap 4 Dropdown eventing is slightly different than Bootstrap 3, therefore the suggested duplicates (and here) will not work to prevent the dropdown from closing on an outside click.

For Bootstrap 4, look for the clickEvent, and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent) {
      e.preventDefault();
    }
})

Demo

---

In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target. For example, look for the 'nav-link' class.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
      e.preventDefault();
    }
});

Demo 2

Bootstrap 3 Dropdowns: on Hover and on Click

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.

Bootstrap close responsive menu "on click"

I've got it to work with animation!

Menu in html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDIT
To make it more generic we can use following code snippet

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Bootstrap drop down cutting off

Check whether media class is has overflow:hidden. If so, replace it with overflow: auto or overflow: visible.

---

Related Topics