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

Question

当单击打开和关闭按钮时，切换菜单工作正常，我希望在单击主体时关闭菜单。 在此先感谢您的帮助。

这是我的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>

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

Answer 1

应该是这样的。

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

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

Answer 2

这个经过编辑的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按钮，也可以关闭菜单叠加。