下拉滑动再次像它触发两次答案

【问题标题】：dropdown slideUp again like it trigger twice下拉滑动再次像它触发两次
【发布时间】：2015-07-02 14:33:02
【问题描述】：

在 sn-ps 下方，当单击文档上的任何位置（除了具有“with_dpx”类别的元素及其孩子/后代但是，当我尝试隐藏（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>

【问题讨论】：

添加 e.stopPropagation();在 e.preventDefault() 之后；在 $(".with_dpx").click 处理程序

标签： javascript jquery

【解决方案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();

        }
    });

【讨论】：