更清晰的代码 jQuery 多个选择器

Question

我正在使用：

$("ul.menu").closest(".wrap").mouseenter(function () {
    $("#nav-blackout").css("display", "block");
})
    $("ul.menu").closest(".wrap").mouseleave(function () {
    $("#nav-blackout").css("display", "none");
});

但是我希望在鼠标进入 ul.menu li 时发生同样的事情，但是如果我将其添加为多重选择器：

 $("ul.menu, ul.menu li").closest(".wrap").mouseenter(function () {
        $("#nav-blackout").css("display", "block");
    })

那么它当然仍然会寻找最接近的 .wrap 这不是我想要做的 - 所以我需要将它写出来两次（一次用于最接近的包装，一次用于 ul.menu li ) 还是有更简洁的方法？

Answer 1

尝试$("ul.menu").closest(".wrap").add('ul.menu li');

$('ul.menu li').closest('.wrap').addBack() 也可以。

您也可以使用 .hide() 代替 .css("display", "none") 和 .show() 相反，而 .toggle() 将交替使用两者。

.hover() 将允许您同时指定 mouseenter 和 mouseleave 处理程序。

$('ul.menu li').closest('.wrap').addBack().hover(
    function () {  //mouseenter handler
        $("#nav-blackout").show()
    }, function () { //mouseleave handler
        $("#nav-blackout").hide()
    }
);

更清晰的代码 jQuery 多个选择器

cleaner code jQuery multiple selectors

jquery

code-cleanup