单击body时如何关闭jquery中的切换菜单

当点击打开和关闭按钮时，切换菜单工作正常，我希望在点击主体时菜单关闭。提前谢谢你的帮助

这是我的jQuery：

jQuery(function($) {
    $('.sidebar-toggle').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
        $('.sidebar-toggle').toggleClass('sidebar-toggled');
        $('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
    });
    $('.sidebar-toggle-inside').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
    });     
});

HTML是：

<div id="page"> 
        <div class="sidebar-toggle sidebar-toggled" style="">
            <i class="fa fa-times"></i>
        </div>
        <div id="content" class="site-content">
            <div class="container content-wrapper">
                <div id="secondary" class="widget-area widget-area-visible" role="complementary" style="">
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <div class="menu-slideoverlaymenu-container">
                            <ul id="primary-menu" class="menu">
                                <li id="menu-item-126"><a href="#">Home</a></li>
                                <li id="menu-item-124"><a href="#">Welcome</a></li>
                                <li id="menu-item-125"><a href="#">About Us</a></li>
                                <li id="menu-item-123"><a href="#">Contact</a></li>
                                <li id="menu-item-122"><a href="#">Solutions</a></li>
                                <li id="menu-item-120"><a href="#">Development</a></li>
                                <li id="menu-item-282"><a href="#">Clients</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

---

此菜单不是下拉菜单，而是它的菜单覆盖。

它应该是这样的

$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".widget-area");

    if (container.has(e.target).length === 0) {
        $('.widget-area').toggleClass('widget-area-visible');
    }
})

---

这个经过编辑的jQuery脚本终于为我工作了，谢谢大家帮助我实现了这一点

//Toggle sidebar
jQuery(function($) {
    $('.sidebar-toggle').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
        $('.sidebar-toggle').toggleClass('sidebar-toggled');
        $('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
    });
    $('.sidebar-toggle-inside').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
    });

$('.site-header, .site-content, .site-footer').click(function(e) {
   e.stopPropagation();
   if ($("#secondary").hasClass("widget-area-visible")) {
       $('.widget-area').toggleClass('widget-area-visible');
$('.sidebar-toggle').toggleClass('sidebar-toggled');
$('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
   }    
});

});

---

这切换了fa按钮并关闭了menuoverlay。

可能重复的@Sinto我已经在提供的链接中尝试了解决方案，但不起作用。这不是一个下拉菜单，它的覆盖菜单。单击“外部”时，您要关闭或隐藏哪个div？@Sinto我想关闭这个div@merryxian它不管是什么类型的菜单，逻辑都是一样的。您需要在文档上附加一个eventhandler，如click事件的链接问题中所示，当该事件发生时，隐藏菜单的方式与用户在您自己的实现中关闭菜单时的方式相同。每当单击时，菜单都会切换，谢谢这个脚本帮助我在每次单击主体时关闭和打开覆盖菜单，至少我编辑了这个脚本以实现功能Hanks这么多，真的帮助了我解决了一个特定的问题。