CODEWITHSUNDEEP
jquerytwitter-bootstrap
Nathan
Nathan

Reputation: 12010

How to hide Twitter Bootstrap dropdown

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 dropdown item but there is a problem with it.

enter image description here

What I have tried

When the item is clicked, I tried doing this:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

That hides it, but then for some reason it won't open again.

As you can see I really need the dropdown to close, because it looks crappy when it stays open (mainly because the z-index of the dropdown is higher than the Facebox modal box overlay.

Why I'm not using Bootstrap's built-in modal box

If you're wondering why I'm not using the nice-looking modal box built into Bootstrap, it is because:

  1. It doesn't have a way to load content into it with AJAX.
  2. You have to type HTML each time for the modal; with Facebox you can do a simple: $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
  3. It uses CSS3 animations to animate (which looks very nice) but in non-CSS3 browsers it just shows, which doesn't look that nice; Facebox uses JavaScript to fade in so it works in all browsers.

Upvotes: 96

Views: 99023

Answers (24)

Oleksii Kuznietsov
Oleksii Kuznietsov

Reputation: 719

Selecting by attribute is the slow way. Here is the fastest solution to hide the opened dropdown:

$(".dropdown-menu.show").parent().dropdown("toggle");

or use following, if the .dropdown-menu is not the next children element (find the closest parent dropdown control):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Upvotes: 1

Shivaji Mutkule
Shivaji Mutkule

Reputation: 1288

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>

Upvotes: 7

WoodrowShigeru
WoodrowShigeru

Reputation: 1606

It may have been added in retrospect (though, that feature is not documented, even in Bootstrap 4.3.1), but you can simply call it with a hide parameter. Just make sure to call it on the toggler element. Like so:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Of course, this also works in reverse with show.

Upvotes: 2

kuiro5
kuiro5

Reputation: 1601

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

Bootstrap 4 (October 2018):

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

Upvotes: 12

kennykee
kennykee

Reputation: 116

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

Upvotes: 1

user3737430
user3737430

Reputation:

you can use this code in your current event handler 

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

in my scenario I used when ajax call complete

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Upvotes: 0

sfy
sfy

Reputation: 3278

The easist way:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Upvotes: 0

bbc_danang
bbc_danang

Reputation: 121

Try this!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

OR

$(clicked_element).trigger("click");

It always work for me.

Upvotes: 5

Alfchee
Alfchee

Reputation: 377

Reading the documentation and using JavaScript it could be done using the toggle method:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

You can read about it in: http://getbootstrap.com/javascript/#dropdowns-methods

Upvotes: 2

Salil Chhetri
Salil Chhetri

Reputation: 1

Hey this simple jQuery trick should help.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Upvotes: 0

Dan Puza
Dan Puza

Reputation: 501

This is what worked for me:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Upvotes: 6

Zeeshan Jan
Zeeshan Jan

Reputation: 307

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

Upvotes: 0

Jared Christensen
Jared Christensen

Reputation: 525

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

Upvotes: 2

Brynner Ferreira
Brynner Ferreira

Reputation: 1576

After click:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Upvotes: 0

Arek
Arek

Reputation: 489

Don't know if this will help anyone (maybe it is too specific to my case, and not to this question) but for me this worked:

$('.input-group.open').removeClass('open');

Upvotes: 0

zhouwubai
zhouwubai

Reputation: 57

The easiest way to do this is: you add a hide label:

<label class="hide_dropdown" display='hide'></label>

then everytime you want to hide dropdown, you call:

$(".hide_dropdown").trigger('click');

Upvotes: 0

Igor Aloise Lod
Igor Aloise Lod

Reputation: 11

Here is my solution on how to close the button dropdown and toggle the button :

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Where "this" is a global container of the button group.

Upvotes: 1

VeXii
VeXii

Reputation: 3109

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

Upvotes: 27

Gurinder
Gurinder

Reputation: 69

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

Upvotes: 6

scolja
scolja

Reputation: 433

The selected answer didn't work for me, but I'm thinking it's because of the newer version of Bootstrap. I ended up writing this:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Hopefully that's helpful to someone else in the future.

Upvotes: 4

Sylvain
Sylvain

Reputation: 39

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

    });

Upvotes: 3

detay
detay

Reputation: 1072

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');
            });
        });
    });
});

Upvotes: 0

Bart Wegrzyn
Bart Wegrzyn

Reputation: 2312

Try this:

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

This may also work for you:

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

Upvotes: 178

Alex Ball
Alex Ball

Reputation: 4484

Try to open HTML with Bootstrap Modal, I use this code:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
});

and the link is like this:

<a href="#my_page" data-toggle="modal">PAGE</a>

Upvotes: 1

Related Questions