How to hide Twitter Bootstrap dropdown

Question

This is getting annoying — when I click on an item in a Bootstrap dropdown, the dropdown doesn\'t close. I have it set up to open a Facebox lightbox when you click the dropd

Answer 1

Use class="dropdown-toggle" on the anchor tag, then when you click on the anchor tag it will close the bootstrap dropdown.

Answer 2

this worked for me, i had a navbar and several pulldown menus.

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Answer 3

This can be done without writing JavaScript code by adding attribute data-toggle="dropdown" into anchor tag as shown bellow:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Answer 4

$('.dropdown.open').removeClass('open');

Answer 5

Why use my method, because if the user gets out of the div, this metod allows the user a certain delay before the submenus dissapear. It's just like using the superfish plugin.

1) First download hover intent javascript

Link here : Hover intent javascript

2)Here is my code to execute

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

Answer 6

You only need to do $('.dropdown.open').removeClass('open'); remove second line which hides the dropdown menu.