javascript - 在一定时间后通过单击 div 外部或鼠标移出来隐藏菜单？

Question

在网页上有菜单，悬停它会打开子菜单。所有菜单和子菜单都使用 div 制作，子菜单使用 style.display = none 隐藏；

问题是一旦打开子菜单，即使鼠标移开它也不会隐藏。无论用户点击页面上的其他地方，它都保持打开状态。

我想知道如何实现一些功能，以便在一段时间后它会自动消失，或者在点击页面上的其余区域时它会消失？

注意:mouseout 无法正常工作。

Answer 1

对于我如何实现一些功能以便在一段时间后它自动消失使用setTimeout。

var canceled;

$("mymenu").on("focusout", function() {
    canceled = false;
    setTimeout(function() {
        if (!canceled) {
            // Hide menu
        }
    }, 2000);
});

$("mymenu").on("focusout", function() {
    canceled = true;
});

对于 或点击页面上的其余区域，它会消失。 您应该直接在 document 根上绑定(bind)一个 click 事件:

$(document).on("click", function() {
    // hide menu if visible
});