0

Подскажите какими путями можно реализовать меню которое при клике будет раскрываться/скрываться а так же при клике в любую область страницы не связанную с меню тоже будет скрываться? Что то на подобие такого http://prntscr.com/flix5p

Дело в том что сейчас есть стандартное кликаешь на кнопку оно открывается и так же закрывается, нужно переделать в вышеописанное, хотелось бы с минимальными изменениями.

Пробовал сделать через $("some_class").focus(); но в таком случае оно не корректно работает. Сейчас думаю над вариантом сделать на псевдоэлементе :focus но что то сомневаюсь в практичности такого решения.

1 ответ 1

1

Пример

$(".btn").click(function(e) {
  $(".b-dropdown").toggle();
  e.stopPropagation();
});

$(".b-dropdown").click(function(e) {
  e.stopPropagation();
});

$(document).click(function() {
  $(".b-dropdown").hide();
});
nav {
  position: relative;
}

.btn {
  background: #ccc;
  padding: 15px;
  color: #000;
  border: none;  
}

.b-dropdown {
  display: none;
  border: 5px solid #ccc;
  padding: 15px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <button class="btn">Button</button>
  <div class="b-dropdown">
    dropdown
  </div>
</nav>

1
  • Благодарю, отличный способ. 19 июн 2017 в 11:47

Ваш ответ

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

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