Develop Reference

Bootstrap keep menu open on outside click

I've exhausted most of the options I found here on Stack... I've created a full width (horizontal) dropdown menu using Bootstrap 3. The nav contains multiple dropdowns within itself and they are activated (displayed) by the mouseenter event:
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
I've tried disabling the "outside" click by using:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
which works, however, it also disables the "mouseenter" event.... How can I resolve this issue? Any feedback would be great! Thanks!

you meant like this? http://codepen.io/saeedsalam/full/ZpgzQv/
i have added following code in addition with yours -
$(document).on('click','.dropdown.open a', function(){
$(this).parent().removeClass('open');
});
hope that helps!

Prevent bootstrap dropdown from closing when clicked on drag

I got a dropdown with a fancy scroll in it. Fancy Scroll is a really simple library that replaces the default scroll. And just by adding some HTML markup, the scroll works without even having to initialize it using javascript.
After debugging to see what was going on, I found that bootstrap is making my dropdown hide when clicking on the drag.
The event is 'hide.bs.dropdown'.
By now, I have attempted so many things, managed to make it work, but the only problem is, whenever I start dragging, due to the stopPropagation() function, it will keep scrolling nan-stap even though I released the mouse click.
These are a few things I've tried while googling, thing is, none of the solved answers involved this case scenario, having a scrollbar in it:
$('.dropdown-menu input, .dropdown-menu label, .thumb', element).click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.thumb', element).on('mouseup', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
$('.dropdown-menu .scrollbarY', element).click(function(e) {
e.stopImmediatePropagation();
});
$(element).on("hide.bs.dropdown",function(e) {
e.preventDefault();
return false;
});
The behavior I'm looking for is, clicking on the scroll drag (.thumb) wouldn't close the dropdown, but if there's a click on one of the items or away from dropdown, it should close it.

Okay, after a few more hours of struggling, a combination of the tests I made, solved the issue.
If anyone encounters the same problem, here's what I did:
(scrollbarY is the draggy parent)
$('.scrollbarY', element).click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Hope it works for everyone.

My dropdown is not working - having trouble with the JS

I have a simple dropdown menu but I am having trouble with the JS.
Every time I click on "li" the dropdown menu (Which is inside the "li") appears which is great but the issue is when I want to dropdown to disappear I click on the "li" again but ".slideToggle()" does not appear to be turning it off.
However if I double click the "li" really fast it gets rid of the dropdown as intended but obviously this is very bad UX.
Please can someone check my code?
$('.dropdown-li').click(function(){
$('.navigation-dropdown').removeClass('enabled');
$(this).toggleClass('enabled');
$('.dropdown-li').addClass('enabled');
if ($(this).hasClass('enabled')) {
$('.navigation-dropdown').stop().hide();
$('.navigation-dropdown', this).slideToggle();
} else{
$('.navigation-dropdown', this).slideToggle();
}
return false;
});
Thanks,
Jordan

This is completely different jQuery from what you're currently using, but it worked for me in a previous project:
$(document).ready(function(){
$(".showhide").click(function(e){
e.preventDefault();
$(this).find('ul').slideToggle(1);
$(this).toggleClass("active");
return false;
});
});
Here's a JSFiddle example. I hope this is what you're looking for! http://jsfiddle.net/4zdjn262/

How to hide jQuery toggle() when I click outside of the menu?

I have found a couple topics regarding to this issue, but none of them unfortunately worked out for me.
I am using this jQuery method like this:
//jQuery
$('.menu_user').click(function(){
$(".top_menu").toggle();
});
// HTML
<div class="menu_user">MENU</div>
<nav class="top_menu">
...
</nav>
Basically, when I click on the MENU div, the menu is rolled down, when I click on it again, then the menu is rolled up = hidden.
The problem is that when the menu is rolled down and I click outside the Menu div, the menu stays displayed - and I would like to hide it.
I went through some tutorials, but I didn't find a solution that would solve this issue.
I'll be glad for every help regarding to this issue.
Thanks!

You can do a click event, and inside it check if the click was inside the menu_user div.
If not, then you can hide the dropdown.
$("body > div").click(function() {
if ($(this).attr("class") != "menu_user") {
$(".top_menu").hide();
}
});

You could use
$(document).on( "click", function() {
if ($('.top_menu:hover').length === 0) {
//hide the stuff
//roll up menu
$(".top_menu").hide();
} else if ($('.menu_user:hover').length === 0) {
$(".top_menu").toggle();
}
});
so that when the menu is rolled down and the user clicked outside .top_menu it will roll up .top_menu
Remember that the above code will fire every time a user clicks on the page.

Bootstrap dropdown menu – stay open if search bar is focused

I am trying to create a customized bootstrap dropdown menu that opens and closes on hover (which I have working), but also stays open if the search bar is focused in the Events dropdown menu until it loses focus or the users clicks away from the dropdown.
Here is my js code:
$('ul.nav li.dropdown').hover(function() {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open'); },
function() {
$("#search-query").focusin(function() {
$('.events').addClass('search-active');
});
if ($('.events').hasClass('search-active')) {
return;
} else {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
Here is a codepen so you can see the rest of my code: http://codepen.io/webinsation/pen/bfDsB
I have tried several different ways to solve this using jquery’s is(':focus') selector with no results.
I appreciate any help or ideas you may have.
Thanks,
– Caleb

You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening.
$('ul.nav li.dropdown').hover(function() {
if (!$(".dropdown-menu:visible").size()) {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open');
}
},
function() {
if (!$(".navbar-search input:focus").size()) {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
CodePen demo

I'll have my try.
I've used the hover() function and it's callback.
function () {
if (!$("#search-query").is(':focus')){
$(this).removeClass('open');
} else if ( !$( '.events' ).is( ':hover' ) ) {
$("#search-query").blur();
$('.dropdown-menu').hide();
}
});
on hover it's pretty much the same, You can set it back to closest as it was before.
On the callback (no hover) I check if not the .events gets hovered (so it'll show each of the other menu items drop down menus and also hiding the .events menu when hover removed. (you can set it to click if you want).
Here is a Fiddle, Hope it assists.