How to hide Twitter Bootstrap dropdown

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

Bootstrap 4 (October 2018):

$('.show').removeClass('show');

Try this:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

This may also work for you:

$('[data-toggle="dropdown"]').parent().removeClass('open');

tryed out most the options from here but none of them realy worked for me. (the $('.dropdown.open').removeClass('open'); did hide it, but if you moused over before clicking anything else it showed up again.

so i endet up doing it whith a $("body").trigger("click")


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

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

Tags:

Jquery

Twitter Bootstrap

Recent Posts