javascript - 无法重复点击事件

Question

这基本上是一个菜单切换功能，我想重复但无法达到预期效果，除非我刷新页面。单击 .fa-bars 将 .animate 类添加到从左侧在菜单中滑动的主体，当菜单可见时单击菜单区域外的任何位置，它会隐藏菜单以及从正文中删除类.animate。

这只有效一次，然后我刷新页面。

在这方面的任何帮助将不胜感激

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

我认为他只想在单击正文时关闭菜单。此代码可能有帮助:

$(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');
        }
    });
});

点击 fb-bars 打开菜单

如果已经打开，点击正文关闭菜单