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
    }
});