Hide submenu when clicking outside the div

Question

I created a side bar with submenu my problem is I want to hide the submenu when the user clicks outside the submenu container (the activities part). I tried the solution in here but I cant get it to work. What can I do to make this work? What am I doing wrong? My sample code and screenshot is below.

 $(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

use this code:

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