Скрыть выпадающее меню при клике куда угодно JQuery

#javascript #jquery #меню

Хочу сделать меню, которое открывается по нажатию на кнопку и закрывается при клике
по любой части экрана. Проблема в том, что меню закрывается при клике куда угодно,
кроме кнопки открывания. 
По моей задумке, после открытия меню класс у кнопки убирается и она должна становиться
неактивна, а значит становится такой же как и любая часть документа, но этого почему-то
не происходит. В чем моя ошибка?

$(document).ready(function() {
    $(hidden).slideUp();

    $('.switch').click(function() {
        $(hidden).slideDown(300);
        $('#drop-but').removeClass('switch');
        return false;
    });

    $(document).click(function() {
        $(hidden).slideUp(300);
        $('#drop-but').addClass('switch');
    });
});

    

Ответы

Ответ 1

Как вариант:



$(function() {
  $('.menu-wrap').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('active')) {
      $this.removeClass('active');
      $(document).off('click.menu');

    } else {
      $this.addClass('active');
      $(document).on('click.menu', function(e) {
        if ($(e.target).closest('.menu-wrap').length === 0) {
          $('.menu-wrap').removeClass('active');
          $(document).off('click.menu');

        }
      });
    }
  });
});
.menu-wrap {
  position: relative;
  width: 100px;
}
.menu-title {
  width: 100%;
  border: 1px solid black;
  cursor: pointer;
  transition: all .5s;
}
.menu-wrap.active .menu {
  visibility: visible;
  opacity: 1;
}
.menu {
  border: 1px solid black;
  border-top: none;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all .5s;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li:hover {
  cursor: pointer;
  background: #eee;
}


  

    menu toogle
  
  

    

      
item1
      
item2
      
item3
    
  



Ответ 2

Дело в том, что этот обработчик:

$('.switch').click(function() {
        $(hidden).slideDown(300);
        $('#drop-but').removeClass('switch');
        return false;
    });


Отменяет все обработчики на .switch, что идут после него.
Чтобы не отменять вместо

return false;


сделайте 

e.preventDefault();


Соответственно e надо указать как входящий параметр

$('.switch').click(function(e) {