Reputation: 12010
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.
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.
If you're wondering why I'm not using the nice-looking modal box built into Bootstrap, it is because:
$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
Upvotes: 96
Views: 99023
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
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
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
Reputation: 1601
$('.open').removeClass('open');
Bootstrap 4 (October 2018):
$('.show').removeClass('show');
Upvotes: 12
Reputation: 116
Bootstrap 4.1:
$(".dropdown-link").closest(".dropdown-menu").removeClass('show');
Upvotes: 1
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
Reputation: 3278
The easist way:
$('.navbar-collapse a').click(function(){
$('.navbar-toggle').trigger('click')
})
Upvotes: 0
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
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
Reputation: 1
Hey this simple jQuery trick should help.
$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});
Upvotes: 0
Reputation: 501
This is what worked for me:
$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");
Upvotes: 6
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
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
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
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
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
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
Reputation: 69
You only need to do $('.dropdown.open').removeClass('open');
remove second line which hides the dropdown menu.
Upvotes: 6
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
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
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
Reputation: 2312
Try this:
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
This may also work for you:
$('[data-toggle="dropdown"]').parent().removeClass('open');
Upvotes: 178
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