Убрать блок по клику вне его

Статус
Закрыто для дальнейших ответов.

FiRеFоX

V.I.P.
Регистрация
07.08.2010
Сообщения
744
Всем привет)
Делаю выдвигающееся слева меню для мобильной версии. Погуглил в интернете, посмотрел примеры, в общем сделал. Выдвигаться оно выдвигается, но я не знаю, как сделать, чтобы оно обратно задвигалось.
Например: Пользователь нажал нужную кнопку и меню выдвинулось, а через секунду пользователь передумал что-то нажимать в этом меню и решил закрыть это меню.
Я хочу сделать, чтобы при клике ВНЕ этого меню оно задвигалось обратно. Ну, нажал в пустую область и оно исчезло.
Как это реализовать?
P.S Весь файл с CSS, js и html прикрепляю здесь же.
Посмотреть вложение menu.html
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
831
Замените javascript на такой

<script type="text/javascript">
function smile() {
if (document.getElementById("menu-secret").className == "m") {
document.getElementById("menu-secret").className = "m-no";
}
else {
document.getElementById("menu-secret").className = "m";
}
}
function big() {
document.getElementById("menu-secret").className = "m";
}
</script>

строку <div class="content"> (или с другим "родителем" выше, в котором нужно срабатывание закрывания меню)
замените на такую
<div class="content" onclick="big()">

строку <a href="#" onclick="smile()" class="bold">Кнопочка вверху</a>
замените на такую
<a href="#" onclick="smile(); event.stopPropagation()" class="bold">Кнопочка вверху</a>
 

FiRеFоX

V.I.P.
Регистрация
07.08.2010
Сообщения
744
Volly сказал(а):
строку
(или с другим "родителем" выше, в котором нужно срабатывание закрывания меню) замените на такую
строку Кнопочка вверху замените на такую Кнопочка вверху

Спасибо, работает! Но работает только при клике в место, где есть текст или ещё что-либо. При клике именно в пустое место, где нет страницы - ничего не происходит :( Пробовал вешать и на body, и на "content", но не помогло :( Может есть решение этой проблемы?
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
831
Сейчас снова попробовал - работает.
Надо учитывать, что размер body на самом деле сейчас не на всё окно, а заканчивается по высоте вместе с чёрной рамкой.
Значит, при варианте <body onclick="big()"> меню будет скрываться при кликах внутри чёрной рамки, справа и слева от неё, но не ниже потому, что там нету body, а также в любом месте появившегося меню.
Другими словами. При контенте на всё окно или больше, скрипт должен срабатывать при клике в любом месте.
В старых браузерах это может не работать.
 

FiRеFоX

V.I.P.
Регистрация
07.08.2010
Сообщения
744
Volly сказал(а):
Сейчас снова попробовал - работает.
Надо учитывать, что размер body на самом деле сейчас не на всё окно, а заканчивается по высоте вместе с чёрной рамкой.
Значит, при варианте <body onclick="big()"> меню будет скрываться при кликах внутри чёрной рамки, справа и слева от неё, но не ниже потому, что там нету body, а также в любом месте появившегося меню.
Другими словами. При контенте на всё окно или больше, скрипт должен срабатывать при клике в любом месте.
В старых браузерах это может не работать.
В Firefox не работает :( Версия 43.0.4 стоит на компе :( Событие event.stopPropagation() не выполняется в нем( А если уж на компе оно не работает, то в большинстве андроидов точно не будет... Как быть? Может как-то создать дополнительный блок на всю ширину страницы и разделить его на два - меню и пустая часть, повешать на каждый из них id и смотреть куда нажал пользователь - в пустой или в меню? Хотя у меня ничего не вышло(
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Вешай на document
 

FiRеFоX

V.I.P.
Регистрация
07.08.2010
Сообщения
744
BaNru сказал(а):
Пробовал. Не получилось. Кнопку "Открыть меню" нажимаешь, происходит событие открыть, затем тут же срабатывает событие по document, которое должно закрывать меню и тут же оно закрывается, даже не открывшись.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ