Geek Answers Handbook

Checking all children of a submenu to see if any element has focus in jquery using: focus selector

I have a navigation menu that, when an item is selected in the menu, a submenu will appear. A submenu can contain 3 possible elements: text to represent a category, a URL that you need to take with you, and a search box with which the user can enter data and press a button to go to the controller’s action. For design purposes, every five elements are grouped into one street.

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 in a submenu that will make the submenu hide. However, if the form has focus (for example, the user tries to enter something, and they accidentally hit 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();
        }
    });

:

1: ul , ?

2: if?

+5
1

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

More articles:


All Articles