javascript - 导航下拉切换 - mouseout 以及悬停？

Question

有人可以帮助我调整以下内容，以便下拉菜单不仅在单击时隐藏，而且在鼠标移出时和/或另一个顶级菜单按钮悬停时隐藏吗？

jsfiddle

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});

我仍在尝试 jQuery/script 编码。

注意:我使用 div 作为下拉列表结构的一部分，例如上面的“ul”被 div 替换。

仅供引用，我不能将以上内容归功于我，这是 Pramod Sankar L(用户 PSL)的工作。

如有任何帮助，我们将不胜感激!

Answer 1

尝试

.mouseleave()

:has()

$(document).ready(function () {
    $("li:has(ul)").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    }).mouseleave(function () {
        $('li > ul').hide();
    });
});

---

$("li:has(ul)") 选择包含 ul 的 li

Fiddle Demo

---

在 Op 发表评论后更新

$(document).ready(function () {
    $("#dropmenu li:has(div)").click(function () {
        $('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
    }).mouseleave(function () {
        $(this).children('div').hide();
    });
});