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 that you have read and understand our privacy policy and code of conduct.

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