在div外部单击时隐藏子菜单

Question

我用子菜单创建了一个侧栏，我的问题是当用户在子菜单容器（活动部分）之外单击时，我想隐藏子菜单。我在here中尝试了该解决方案，但无法使其正常工作。我该怎么做才能使这项工作？我究竟做错了什么？我的示例代码和屏幕截图如下。

 $(document).click(function(e){
    var myTarget = $(".scrollbar-container");
    var clicked = e.target.className;
    if($.trim(myTarget) != '') {
        if($("." + myTarget) != clicked) {
           $("#app-container").removeClass("sub-show-temporary");
        }
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
         <div class="main-menu">
              <div class="scroll">
                   <div class="scrollbar-container">
                        <ul class="list-unstyled nav flex-column">
                            <li class="active nav-item" id="dashboard-nav">
                                <a id="dashboard-page">
                                    <i class="fa fa-tachometer"></i> 
                                    <span>Dashboard</span>
                                 </a>
                             </li>
                             <li class="nav-item" id="activity-nav">
                                 <a id="activity-menu">
                                      <i class="fa fa-tasks"></i> 
                                      <span>Activity</span>
                                 </a>
                             </li>
                             <li class="nav-item" id="retailer-nav">
                                 <a id="retailer-menu">
                                    <i class="fa fa-users"></i> 
                                    <span>Retailer</span>
                                 </a>
                             </li>
                             <li class="nav-item" id="settings-nav">
                                 <a id="settings-menu">
                                     <i class="fa fa-gear"></i> 
                                     <span>Settings</span>
                                 </a>
                             </li>
                             <li class="nav-item">
                                 <a href="logout.php?logout">
                                     <i class="fa fa-power-off"></i> 
                                     <span>Logout</span>
                                 </a>
                             </li>
                         </ul>
                     </div>
                 </div>
             </div>
             <div class="sub-menu">
                <div class="scroll">
                    <div class="scrollbar-container ps">
                        <ul class="d-block nav" id="activities-sub-menu">
                            <li class="nav-item active">
                                <a id="activities-page" class="active">
                                    <i class="simple-icon-credit-card"></i> 
                                    <span>Activities</span>
                                 </a>
                            </li>
                            <li class="nav-item">
                                <a id="activities-gallery-page">
                                    <i class="simple-icon-list"></i> 
                                    <span>Activity Gallery</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav" id="retailer-sub-menu">
                            <li class="nav-item">
                                <a id="retailer-page">
                                    <i class="simple-icon-check"></i> 
                                    <span>Retailer</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="retailer-outlet-page">
                                    <i class="simple-icon-check"></i> 
                                     <span>Retailer Outlet</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="prospect-retailer-page">
                                    <i class="simple-icon-calculator"></i> 
                                    <span>Prospect Retailer</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="distance-matrix-page">
                                    <i class="simple-icon-bubbles"></i> 
                                    <span>Distance Matrix</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav" id="settings-sub-menu">
                            <li class="nav-item">
                                 <a>
                                    <i class="simple-icon-check"></i> 
                                    <span>Retailer Outlet</span>
                                 </a>
                            </li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>

Answer 1

使用此代码：

$(document).on('mouseup', function(e) {
    if (!$(".sidebar").is(e.target) && $(".sidebar").has(e.target).length === 0) {
        //close or hide your submenu
    }
});