rustam_kuliev88
@rustam_kuliev88

Выпадающее меню скрыть по клику вне элемента?

Есть простое меню

<ul>
    <li>
      <span id="menu_name">Собственное производство</span>
      <ul class="sub_id">
        <li>Декоративные украшения для канапе, коктелей из бамбука и дерева</li>
        <li>Контейнера и миски РР для горячих блюд</li>
        <li>Палочки для суши, стеки для шашлыка</li>
      </ul>
    </li>
</ul>


и есть JS:

$('#menu_name').on('click', function() {
  $('.sub_id').addClass('sub_menu_visible');
  });


При клике открывает меню, но как сделать чтобы вне его клика оно закрывалось, плюс так же вопрос что когда щас кликает, открывает все элементы, как передать значение что только действующего ?
  • Вопрос задан
  • 80 просмотров
Решения вопроса 3
@alexhovansky
Вешаете на body обработчик onClick:
document.body.addEventListener('click', clickHandler);


Далее в clickHandler смотрите куда кнули:
function clickHandler(e) { var target = e.target }

Дальше нужно смотреть с помощью contains содержится ли в "кликнутом" узле ваше меню, если нет - скрываете или ещё что-то делаете.

Второй вопрос упустил. Если я правильно понял, то нужно обращаться к $(this), через него уже или атрибуты парсить и выбирать нужное, или же пользоваться .next()
Ответ написан
svistiboshka
@svistiboshka
живые веб интерфейсы
Жмем на document проверяем куда попали и если в родителях нет sub_id то значит кликнули в любое другое место и закрываем меню
$(document).on('click', function(event) {
  if (!$(event.target).closest('.sub_id').length) {
    alert('закрыть меню')
    $('.sub_id').removeClass('sub_menu_visible');
  }
 //Ничего не делать
})

https://jsfiddle.net/psx6o352/
Ответ написан
@yadscreech
$(document).mouseup(function (e) {
      var container = $('ваш блок/обёртка/"белый фон"');
      if (container.has(e.target).length === 0){
         "Делаем тут что хотим с дочерними эл-ми и не только"
      };
  });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы