CODEWITHSUNDEEP
javascriptjqueryjsonhtmlcss
Infotechie
Infotechie

Reputation: 1653

Hide menu by clicking outside a div or a on mouseout after a certain amount of time?

On a web page there are menus and on hovering it sub menus open.All menu and sub menus are made using div and sub menus are hiding using style.display = none;

The problem is once subMenu is opened it does not hide even on mouse-out. It remains open no matter user has clicked somewhere else on the page.

I want to know how can I implement some functionality so that after some time it automatically get disappear or on clicking on rest of the area on page it disappears?

Note: mouseout is not working properly.

Upvotes: 1

Views: 1115

Answers (1)

rdiazv
rdiazv

Reputation: 1153

For how can I implement some functionality so that after some time it automatically get disappear use setTimeout.

var canceled;

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

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

For or on clicking on rest of the area on page it disappears. you should bind a click event directly on the document root:

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

Upvotes: 1

Related Questions