1

Я сделал простое меню. При нажатии на блочный элемент, на котором написано "Кнопка" появляется подменю. Убрать подменю можно при нажатии на пустую область экрана. А как сделать так, чтобы оно убиралась при повторном нажатии на блочный элемент?введите сюда описание изображения

1 ответ 1

5

Используйте метод toggle():

Вариант 1 - если нужно скрыть/показать меню при нажатии на кнопку

$(".test").on("click", function() {
  $(".menu").toggle();
});
.test {
  width:100px;
  background: #dfdfdf;
  padding:5px;
  cursor:pointer;
}
.menu {
  display: none;
  margin-top:10px;
  width: 150px;
  height: 150px;
  background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">кнопка</div>
<div class="menu">меню</div>

Вариант 2 - если нужно скрыть/показать меню при нажатии на кнопку, а также если нужно скрывать меню при нажатии за пределами меню

$(document).on("click", function(e) {
  if (e.target.id != 'test' && e.target.id != 'menu') {
    $("#menu").hide();
  } else if (e.target.id != 'menu') {
    $("#menu").toggle();
  }
});
#test {
  width: 100px;
  background: #dfdfdf;
  padding: 5px;
  cursor: pointer;
}
#menu {
  display: none;
  margin-top: 10px;
  width: 150px;
  height: 150px;
  background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">кнопка</div>
<div id="menu">меню</div>


UPD: Вариант 3 на javascript - открытие меню при нажатии на кнопку, закрытие при повторном нажатии на кнопку или на область вне меню

document.addEventListener("click", function(e) {
  let m = document.getElementById('menu');
  if (e.target.id != 'test' && e.target.id != 'menu') {
    m.style.display = 'none';
  } else if (e.target.id == 'test') {
    m.style.display = (m.style.display != 'block') ? 'block' : 'none';
  }
});
#test {
  width: 100px;
  background: #dfdfdf;
  padding: 5px;
  cursor: pointer;
}

#menu {
  display: none;
  margin-top: 10px;
  width: 150px;
  height: 150px;
  background: #d3d3d3;
}
<div id="test">кнопка</div>
<div id="menu">меню</div>

5
  • А как сделать, чтобы также и при нажатии на пустую область подменю закрывалось ?
    – user226023
    31 окт 2016 в 17:03
  • @user226023 а что вы понимаете под пустой областью подменю ?
    – Alex
    31 окт 2016 в 17:27
  • 1
    @user226023, stackoverflow.com/a/36549967/4928642
    – Qwertiy
    31 окт 2016 в 17:31
  • А как будет выглядеть код на JavaScript Vanilla ? 26 июн 2019 в 9:53
  • @ПолосатыйТигр добавлен пример на javascript
    – Alex
    26 июн 2019 в 19:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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