JQuery кнопка открыть список, список закрыт при нажатии за пределами

Question

Я знаю, что на SO есть дюжина вопросов, но ни один из них, похоже, не работает для меня. То, что я пытаюсь, это следующий код:

jQuery('.mybutton').click(function(){

  jQuery('.list').show().bind('click', function(event){
    event.stopPropagation();
  });

  jQuery('html').bind('click', function() {
    jQuery('.list').hide();
  });
});

Элемент списка никогда не открывается. Нажатие html-привязки всегда выполняется.

Answer 1

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

jQuery('.mybutton').click(function(e){
  jQuery('.list').show();
   e.stopPropagation();
});

jQuery('body').click(function() {
  jQuery('.list').hide();
});

jQuery('.list').click(function(e){
  e.stopPropagation();
});

Я думаю, что основная проблема в том, что вам нужен вызов stopPropagation и в вашем обработчике кликов mybutton.

Answer 2

Вместо привязки click к html и .list, связывайте его глобально и проверьте, является ли текущая цель (дочерняя) элемента .list.

jQuery('.mybutton').click(function(){
  jQuery(window).click(function(event) {
       var $elem = $(event.target)
       if($elem.hasClass('list') || $elem.parents('.list').length == 0) return;
       jQuery('.list').hide();
   });
});