当单击指定的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).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");
     }
 });

Answer 2

你可以试试这个

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