Question

Here’s an example. This is Google menu.

When you click on the gear-wheel (red cross) the menu appears. When you click anywhere beyond opened menu (green cross) the menu disappear. The question is how to catch that second closing event (green cross).

It’s simple to open the menu.

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function() {
    y.style.display = "block";
}

But how to make it closed? I tried this way using “body” tag:

var bar = document.getElementsByTagName("body")[0];
bar.onclick = function() {
    if (y.style.display == "block") {
       y.style.display = "none";
    }
}

But the menu is closed immediately after it has been opened. First it becomes “block” as “star” is clicked. But immediately after this becomes “none” as body is also clicked. How to solve it? Is it really necessary to write code for “body” for catching right target event?

Answer 1

star.addEventListener("click", closeIfOpen);
document.addEventListener("click", closeIfClickOutsideMenu);