要素を表示して本文に隠すロジック

Question

コードがあります。 ボタン上のこのコードは、開いているメニューをクリックします。 ボタンをもう一度クリックすると、メニューが非表示になります（showクラス、showクラスにはdisplay:blockルールがあるので、ボタンをクリックしてこのアイテムの表示を切り替えます）。 次の行には、どの要素がクリックされたかを確認するイベントがあります。メニューの「外側」をクリックすると、メニューが非表示になり、beacuse私は.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); 
}); 

注意をドキュメントバインディングコールバック内の条件、および単純に選択セットから除外します。