Question

我创建了一个自定义下拉列表，一切都很好，除非我想隐藏下拉列表（slideUp），如果没有下拉div和它的所有子项被点击。为了更加清晰，我打算隐藏下拉列表，如果没有下拉单击（主体单击或文档上的任何位置，除了下拉列表及其子项）。下面是我的片段但是，我的尝试遗憾地无法正常工作。非常感谢任何帮助，建议，建议，想法，线索。谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

当单击指定的div以外的其他时，然后隐藏下拉列表

2 个答案: