Question

I have a navigation menu which when an item is selected on the menu, a submenu will appear. The submenu can contain 3 possible elements: text to represent a category, a url to take the user somewhere, and a search box with which the user can type data in and hit a button to go to a controller action. For design purposes, every five elements are grouped into one ul.

This is an example of such a submenu:

<div id = "submenu">
<ul>
<li> Products </li>
<li> <a href = "ourproducts"> View Our Products</a></li>
<li> <form method="GET" action="/"><input value="" name="searchproduct"><input type="Submit" value="Search For Product"> </form> </li>
</ul>

I have a mouseleave function on the submenu that will cause the submenu to hide. However, if the form has focus (say the user is trying to type something in and they accidentally bump the mouse), then I do not want the submenu to disappear.

This is what I have tried so far:

$("#submenu").mouseleave(function () {
        var childhasfocus= 0;
        for (var i = 1; i < $(this).children().length; i++) {
            if ($(this).children[i].is(":focus") == true) { //CODE GOES UP TO HERE BEFORE BREAKING
                childhasfocus = 1;
            }
        }
        // TRIED THIS- if ($(this + '>:focus').length > 0){
        if (childhasfocus != 1){
            hideLinks();
        }
    });

Two Questions:

1:If one of the elements inside a ul has focus, will the ul also has focus?

2:What should I replace my if statement with?

Answer 1

Try this

$("#submenu").mouseleave(function () {
    //This will check if any child of submenu has focus. If no then hideLinks
    if ($(this).children(":focus").length == 0){
        hideLinks();
    }
});