How to hide Twitter bootstrap newsletter

Question

It becomes annoying. when I click on an item in the Bootstrap drop-down list, the dropdown does not close. I installed it to open the Facebox lightbox when you click the drop-down list, but there is a problem with it.

---

What i tried

When the item is clicked, I tried to do this:

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

This hides it, but for some reason it will not open again.

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

---

Why I do not use the built-in modal block Bootstrap

If you're wondering why I don’t use the beautiful modal framework built into Bootstrap, this is because:

• It has no way to load content into it using AJAX.
• You must type HTML every time for modal; with Facebox, you can do simple: $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
• It uses CSS3 animations to animate (which looks very nice), but in browsers other than CSS3, it just shows that it doesn't look so good; Facebox uses JavaScript to fade out, so it works in all browsers.

Answer 1

Try the following:

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

This may also work for you:

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

Answer 2

tried most of the options from here, but none of them worked for me. ( $('.dropdown.open').removeClass('open'); really hid it, but if you got over before you click anything else, it will reappear.

so I do this with $("body").trigger("click")

Answer 3

You just need to do $('.dropdown.open').removeClass('open'); delete the second line that hides the dropdown menu.

Answer 4

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

Did it for me.

Answer 5

You can do this without writing JavaScript code by adding the data-toggle = "dropdown" attribute to the 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> 

Answer 6

The selected answer did not work for me, but I think about it because of the newer version of Bootstrap. I ended up writing this:

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

Hope this helps someone else in the future.

Answer 7

This is what worked for me:

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

Answer 8

Why use my method, because if the user exits the div, this method allows the user to linger before the submenu disappears. This is similar to using the superfish plugin.

1) First load hover intent javascript

Link here: javascript hover intent

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 9

Try opening 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 looks like this:

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

Answer 10

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

Answer 11

By reading the documentation and using JavaScript, this can be done using the toggle method:

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

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

Answer 12

Try it!

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

OR

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

He always works for me.

Answer 13

Here is my decision on how to close the dropdown menu and switch the button:

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

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

Answer 14

this worked for me, I had a navigation bar and a few drop down menus.

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

Answer 15

The easiest way to do this is to add a hide shortcut:

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

then every time you want to hide the drop-down list, you call:

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

Answer 16

I don’t know if this will help anyone (maybe this is too specific for my business, and not for this question), but for me it worked:

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

Answer 17

After clicking:

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

Answer 18

Use class = "dropdown-toggle" in the anchor tag, then when you click on the anchor tag, it closes the bootstrap popup window.

Answer 19

Hey, this simple jQuery trick should help.

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

Answer 20

A simple way:

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

Answer 21

this code can be used in the current event handler

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

in my script i used when ajax call completed

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