Question

在片段下方，我点击（隐藏）具有“dpx”类（下拉菜单）的ul，当单击文档上的任何位置而不是具有“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>

Answer 1

这是我尝试过的。

取代 slideDown ，使用 slideToggle

JS -

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

使用 not（＆＃34; .with_dpx＆＃34;），因此不会考虑来自同一元素的事件。

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

        }
    });

下拉滑动再次像触发两次

1 个答案: