javascript - 在一定时间后通过单击 div 或鼠标悬停来隐藏菜单？

Question

在网页上有菜单，悬停时打开子菜单。所有菜单和子菜单都是使用 div 制作的，子菜单使用 style.display = none;

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

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

注意：mouseout 无法正常工作。

Answer 1

供how can I implement some functionality so that after some time it automatically get disappear使用setTimeout。

var canceled;

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

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

因为您应该直接在根上or on clicking on rest of the area on page it disappears.绑定一个事件：clickdocument

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