Логика для отображения элементов и скрытия их на теле нажмите

Question

У меня есть часть кода. Этот код при нажатии кнопки открывает меню. Когда я снова нажимаю кнопку, меню скрыто (я удаляю. класс, класс show имеет display:block правило, поэтому я переключаю видимость этого элемента, нажимая на кнопку). В следующей строке у меня есть событие, которое проверяет, какой элемент нажат. Если я «нажимаю« вне »меню, меню становится скрытым, beacuse i remove .show.

А теперь у меня проблема, похоже, что первая часть кода больше не работает (button.on ('click')) - я имею в виду, работа, но вторая часть кода также выполняется, и эта логика сейчас сломана

у вас есть какие-либо идеи для обходного Благодарности

 var menu = $('.main-menu'); 
     var button = $('.burger'); 
     button.on('click',function() { 
      if (menu.hasClass('show')) { 
       menu.removeClass('show'); 
       $(this).removeClass('opened'); 
      } else { 
       menu.addClass('show'); 
       $(this).addClass('opened'); 
      } 
     }); 
     $(document).bind("mouseup touchend", function(e){ 
      var container = menu; 
      if (!container.is(e.target) 
       && container.has(e.target).length === 0) { 
       container.removeClass('show'); 
       button.removeClass('opened'); 
      } 

     }); 

Answer 1

возможно использовать JQuery toggle() метод.? Например:

button.on('click',function() { 
    menu.toggle(); 
}); 

Answer 2

Вы должны связать внешнее событие щелчка только тогда, когда событие нажатия кнопки было запущенно, и удалить внешнее событие щелчка, когда внешнее событие щелчка срабатывало:

var menu = $('.main-menu'); 
var button = $('.burger'); 
button.on('click',function() { 
    if (menu.hasClass('show')) { 
     menu.removeClass('show'); 
     $(this).removeClass('opened'); 
    } else { 
     menu.addClass('show'); 
     $(this).addClass('opened'); 
    } 
    var butbindfunc = function(e){ 
     var container = menu; 
     container.removeClass('show'); 
     button.removeClass('opened'); 
     $(this).unbind("mouseup touchend", butbindfunc); 
    }; 
    $(document).not(button).bind("mouseup touchend", butbindfunc); 
}); 

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