проверка всех дочерних элементов подменю, чтобы увидеть, имеет ли какой-либо элемент фокус в jquery, используя: focus selector

Question

У меня есть меню навигации, которое, когда в меню выбран элемент, появится подменю.Подменю может содержать 3 возможных элемента: текст для представления категории, URL-адрес, куда пользователь может куда-то попасть, и поле поиска, с помощью которого пользователь может вводить данные и нажимать кнопку, чтобы перейти к действию контроллера.Для целей проектирования, каждые пять элементов сгруппированы в одну ул.

Это пример такого подменю:

<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>

У меня есть функция отпускания мышью в подменю, которая вызывает подменюпрятаться.Однако, если форма имеет фокус (скажем, пользователь пытается что-то набрать, а он случайно нажал на мышь), я не хочу, чтобы подменю исчезло.

Это то, что я пробовал до сих пор:

$("#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 имеет фокус, будет ли ul такжеимеет фокус?

2: чем заменить выражение if на?

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