javascript - 下拉再次滑动就像触发两次

Question

在下面的代码片段中，当单击文档上除了具有“with_dpx”类及其子元素的元素之外的任何位置时，我确实向上滑动(隐藏)了具有“dpx”类(下拉菜单)的ul然而，当我试图隐藏(slideUp)它时，当单击ul中具有“dpx”类(下拉菜单)的任何li元素时，它再次执行了slideUp和slideDown，就像它触发了两次一样，当我单击具有“with_dpx”类的父菜单，它确实向上滑动并再次向下滑动，就像触发了两次一样，非常感谢任何想法、帮助、建议、建议、线索，谢谢。

$(document).ready(function(){
  $(".with_dpx").click(function(e){
        $(".dpx", this).slideDown();
        e.preventDefault();
    });
   $(".dpx li").click(function(){
       $(".dpx").hide(); 
    });
  
$(document).mouseup(function(e)
    {
        var container = $(".dpx");

        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.slideUp();

        }
    });
});

.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

这是我尝试过的。

使用slideToggle代替slideDown

JS-

$(".with_dpx").click(function(e){
        $(".dpx", this).slideToggle();
        e.preventDefault();
    });

使用not(".with_dpx")，这样它就不会考虑来自同一元素的事件。

$(document).not(".with_dpx").mouseup(function(e)
    {
        var container = $(".dpx");

        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.slideUp();

        }
    });