Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 7

#1 FiRеFоX

FiRеFоX

    Завсегдатай

    Топикстартер
  • V.I.P.
  • 43
    739 сообщ.

Отправлено 04 Март 2017 в 11:19

Всем привет)

Делаю выдвигающееся слева меню для мобильной версии. Погуглил в интернете, посмотрел примеры, в общем сделал. Выдвигаться оно выдвигается, но я не знаю, как сделать, чтобы оно обратно задвигалось.

Например: Пользователь нажал нужную кнопку и меню выдвинулось, а через секунду пользователь передумал что-то нажимать в этом меню и решил закрыть это меню. 

Я хочу сделать, чтобы при клике ВНЕ этого меню оно задвигалось обратно. Ну, нажал в пустую область и оно исчезло.

Как это реализовать?

P.S Весь файл с CSS, js и html прикрепляю здесь же.

Прикрепленный файл  menu.html   2,63К   53 Количество загрузок:


  • 0

Спонсор

#2 Volly

Volly

    Увлеченный

  • Участник
  • 96
    477 сообщ.

Отправлено 04 Март 2017 в 13:00

Замените 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>


Сообщение отредактировал Volly: 04 Март 2017 в 13:03

  • 1

#3 FiRеFоX

FiRеFоX

    Завсегдатай

    Топикстартер
  • V.I.P.
  • 43
    739 сообщ.

Отправлено 05 Март 2017 в 09:36


строку
(или с другим "родителем" выше, в котором нужно срабатывание закрывания меню) замените на такую
  строку Кнопочка вверху замените на такую Кнопочка вверху

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


  • 0

#4 Volly

Volly

    Увлеченный

  • Участник
  • 96
    477 сообщ.

Отправлено 05 Март 2017 в 12:33

Сейчас снова попробовал - работает.

Надо учитывать, что размер body на самом деле сейчас не на всё окно, а заканчивается по высоте вместе с чёрной рамкой.

Значит, при варианте <body onclick="big()"> меню будет скрываться при кликах внутри чёрной рамки, справа и слева от неё, но не ниже потому, что там нету body, а также в любом месте появившегося меню.

Другими словами. При контенте на всё окно или больше, скрипт должен срабатывать при клике в любом месте.

В старых браузерах это может не работать.


  • 0

#5 FiRеFоX

FiRеFоX

    Завсегдатай

    Топикстартер
  • V.I.P.
  • 43
    739 сообщ.

Отправлено 05 Март 2017 в 13:04

Сейчас снова попробовал - работает.

Надо учитывать, что размер body на самом деле сейчас не на всё окно, а заканчивается по высоте вместе с чёрной рамкой.

Значит, при варианте <body onclick="big()"> меню будет скрываться при кликах внутри чёрной рамки, справа и слева от неё, но не ниже потому, что там нету body, а также в любом месте появившегося меню.

Другими словами. При контенте на всё окно или больше, скрипт должен срабатывать при клике в любом месте.

В старых браузерах это может не работать.

В Firefox не работает :( Версия 43.0.4 стоит на компе :( Событие event.stopPropagation() не выполняется в нем( А если уж на компе оно не работает, то в большинстве андроидов точно не будет... Как быть? Может как-то создать дополнительный блок на всю ширину страницы и разделить его на два - меню и пустая часть, повешать на каждый из них id и смотреть куда нажал пользователь - в пустой или в меню? Хотя у меня ничего не вышло(


  • 0

#6 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 983
    3 516 сообщ.

Отправлено 05 Март 2017 в 14:43

Вешай на document
  • 0

#7 FiRеFоX

FiRеFоX

    Завсегдатай

    Топикстартер
  • V.I.P.
  • 43
    739 сообщ.

Отправлено 05 Март 2017 в 15:34

Вешай на document

Пробовал. Не получилось. Кнопку "Открыть меню" нажимаешь, происходит событие открыть, затем тут же срабатывает событие по document, которое должно закрывать меню и тут же оно закрывается, даже не открывшись.


  • 0

#8 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 983
    3 516 сообщ.

Отправлено 06 Март 2017 в 00:19

https://learn.javasc.../event-bubbling
  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей