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

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

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

1 个答案: