クリックイベントを繰り返すことができません

Question

これは基本的には繰り返したいメニュートグル機能ですが、ページを更新しないと目的を達成できません。 .fa-barsをクリックすると、左からメニュー内をスライドする本体にクラス.animateが追加され、メニュー領域外のどこかをクリックするとメニューが隠され、本体からクラス.animateが削除されます。

これは1回しか動作せず、ページを更新します。

この点で任意のヘルプは、私は彼が唯一の体をクリックすると、メニューを閉じたいと思います

jQueryのコード

$(document).ready(function() 
{ 
    $(document).on('click', function() 
    { 
     if($('body').hasClass('animate')) 
     { 
      $('body.animate').on('click', function() 
      { 
        $(this).removeClass('animate'); 
      }); 
     } 
     else 
     { 
      $('.fa-bars').on('click', function() 
      { 
        $('body').addClass('animate'); 
      }); 
     } 
    }); 
}); 

Answer 1

を理解されるであろう。このコードは役立つかもしれない：メニューを閉じるには、本体のメニュー

クリックを開くには、FB-バー上

$(document).ready(function() { 
    $('.fa-bars').on('click', function (evt) { 
     $('body').addClass('animate'); 
     evt.stopPropagation(); 
    }); 

    $('body').on('click', function() { 
     if ($('body').hasClass('animate')) { 
      $('body').removeClass('animate'); 
     } 
    }); 
}); 

クリックして、すでに