Вот есть меню у Гугла (см. картинку)
Открывается только когда нажмешь на звездочку (красный крестик). А закрывается, когда кликаешь где угодно за пределами открытого меню (зеленый крестик). Так вот вопрос. Как найти этот зеленый крестик, второй клик, чтоб закрывать меню?
Открыть просто. Можно например так:
var x = document.getElementById("star"); // это id звездочки
var y = document.getElementById("hiddenMenu"); // это id меню, у которого display = none;
x.onclick = function() {
y.style.display = "block";
}
А вот как сделать, чтоб его закрыть? Попробовал сделать так, через главный тег body:
var bar = document.getElementsByTagName("body")[0];
bar.onclick = function() {
if (y.style.display == "block") {
y.style.display = "none";
}
}
Но получается, что он его только открыв, тут же и прячет. То есть сначала присваивает "block", так как кликнули по "star", но и тут же присваивает "none", так как кликнули и по "body".
Я пока вижу решение такое: написать код отлавливания нужного таргета события для body (отсекать все ненужные элементы). Но это какой-то прямой простецкий путь. Мне кажется, что должно быть какое-то другое решение, более лаконичное. Ведь так на body может висеть уйма разных меню и других захлопывающихся элементов. Неужели на body все их нужно тогда вешать? В общем, как это можно реализовать иначе?