單擊主體時如何關閉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按鈕，也可以關閉菜單疊加。