检查子菜单的所有子项以查看是否有任何元素在jquery中具有焦点,使用:焦点选择器

Question

我有一个导航菜单,当菜单上选择一个项目时,将出现一个子菜单.子菜单可以包含3个可能的元素:表示类别的文本,将用户带到某处的URL,以及用户可以键入数据并按下按钮以转到控制器操作的搜索框.出于设计目的,每五个元素被分组为一个ul.

这是这样一个子菜单的例子:

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

我在子菜单上有一个mouseleave功能,会导致子菜单隐藏.但是,如果表单具有焦点(比如用户试图输入内容并且他们不小心碰到鼠标),那么我不希望子菜单消失.

这是我到目前为止所尝试的:

$("#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替换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();
    }
});