Bootstrap dropdown menu – stay open if search bar is focused

Question

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

when I click on the search bar and moved my mouse away it stayed open. And when I clicked away it went away. — Zach Starnes, Sep 03 '13 at 17:56

CheeseWarlock · Accepted Answer · 2013-09-03T18:54:46.890

2

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

edited Sep 03 '13 at 18:54

answered Sep 03 '13 at 18:10

CheeseWarlock

1,361
1
10
11

Thanks for your input @Joe! The only problem now is that my other menus will still open(and get stuck open) if they are hovered when the search-bar(input) has focus. I need to make it so that the other menus cannot be opened unless they are clicked on when the search-bar is focused. – Caleb Sep 03 '13 at 18:36
Yep, I should've included that before, sorry. I've updated it to fix that. – CheeseWarlock Sep 03 '13 at 19:02
Thanks, only problem is that your fix broke the hover behavior on my actual site. what you really need is to check that the .events dropdown menu is not visible before showing other menus. If you don’t mind I will edit your answer with the final code and then mark it as answered. – Caleb Sep 03 '13 at 19:14
Looks like your edit was rejected, probably because the current answer solves the problem as it was stated in the question. It works the same in CodePen with or without the `.events`. – CheeseWarlock Sep 03 '13 at 23:59
Yes, works the same in codepen, but in production things are messed up. It needs to be ".events .dropdown-menu:visible". Anyways, thanks for the help man! – Caleb Sep 04 '13 at 13:49

Shahar Galukman · Answer 2 · 2013-09-03T18:47:56.090

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.

Thanks for answering Shahar, but the answer above is what I was looking for. Appreciate your help. — Caleb, Sep 03 '13 at 20:21

Bootstrap dropdown menu – stay open if search bar is focused

2 Answers2

Linked