1

Здравствуйте! Вот мой Jquery:

$("#hmrIcon").on('click', function(){
	if ($(".menu-responsive").css('display') === "none") {
		$(".menu-responsive").css('display', "inline-flex")
	} else {
		$(".menu-responsive").css('display', "none")
	}
	
});

При клике на иконку "#hmrIcon" выполняется функция в которой проверяется условие и применяется CSS свойство у ".menu-responsive" являющимся блоком меню. Т.е появляется и скрывается по клику.
Попытка осуществить скрытие блока при клике вне области вот уже 3-й вечер неуспешны. Помогите пожалуйста!

$(document).mouseup(function(e) {
	var $target = $(e.target);
	if ($target.closest(".hmList").length == 0) {
		$(".menu-responsive").css('display', "none")
	}
});

Элемент ".hmList" является дочерним для ".menu-responsive".

2

1 ответ 1

1

Скрыть ваш элемент и выполнить дополнительные действия можно в обработчике onclick у корня. Однако если ничего не предпринять, щелчок по кнопке или даже внутри области меню скроет его. Чтобы это предотварить, отменим всплытие события методом stopPropagation.

$(document).click(function() {
  $(".menu-responsive").css("display", "none");
});
$(".menu-responsive").click(function(event) {
  event.stopPropagation();
});
$("#hmrIcon").click(function(event) {
  if ($(".menu-responsive").css("display") === "none") {
    $(".menu-responsive").css("display", "block")
  } else {
    $(".menu-responsive").css("display", "none")
  }
  event.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="hmrIcon">Нажимать сюда</button>
<div class="menu-responsive">Типа меню...</div>

1
  • Спасибо Всем за исчерпывающие ответы! Движемся дальше, вроде получается. Commented 18 авг. 2017 в 8:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.