при щелчке, отличном от указанного div, затем скрыть раскрывающееся меню

Question

Я создал настраиваемое раскрывающееся меню, все работает хорошо, за исключением того, что я хочу, чтобы выпадающее меню было скрыто (slideUp), если не выпадающий div и все его дочерние элементы нажаты. Чтобы быть более резким, я намерен скрыть раскрывающееся меню, если не щелкнуть выпадающий (щелчок по телу или в любом месте документа, кроме раскрывающегося списка и его дочерних элементов). Ниже приведены мои фрагменты, но мои попытки, к сожалению, не работают. Любая помощь, предложения, рекомендации, идеи, подсказки очень приветствуются. Спасибо!

$(document).ready(function(){ 
 
    $(".with_dpx").click(function(e){ 
 
     $(".dpx", this).slideDown(); 
 
     e.preventDefault(); 
 
    }); 
 
    $(document).on("click", function(event){ 
 
     if(event.target.is(".dpx")){ 
 
      alert("asdas"); 
 
     } 
 
    }); 
 
    
 
});

.thehide{display: none;} 
 
.dpx{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    list-style: none; 
 
    position: absolute; 
 
    z-index: 9999; 
 
    padding: 10px; 
 
    background: #fff; 
 
    margin-top: 20px; 
 
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3; 
 
} 
 
.dpx li{list-style: none;} 
 
.dpx li{ 
 
    padding: 5px 8px!important; 
 
    font-size: 15px; 
 
    color: #555 !important; 
 
    display: block !important; 
 
    clear: both; 
 
    float: none; 
 
    text-transform: uppercase; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <a href="#" class="with_dpx"> 
 
    Menu 1 
 
    <ul class="thehide extend clear display_table dpx" id="test"> 
 
     <li>hr approver</li> 
 
     <li>manager approver</li> 
 
     <li>attendance approver</li> 
 
    </ul> 
 
    </a> 
 
    <a href=="#"> 
 
    Menu 2 
 
    </a> 
 
</div>

Answer 1

вы можете попробовать это

$(document).mouseup(function (e) 
{ 
var container = $("YOUR CONTAINER SELECTOR"); 

if (!container.is(e.target) // if the target of the click isn't the container... 
    && container.has(e.target).length === 0) // ... nor a descendant of the container 
{ 
    container.hide(); 
} 
}); 

Answer 2

Вы можете попробовать это: -

$(document).on("click", function(event){ 
    if($(event.target).is(".dpx")||$(event.target).closest(".dpx").length){ 
     //or this will also work 
     //$(event.target).parents(".dpx").length   
     alert("asdas"); 
    } 
});