dropdown slideUp снова, как он дважды запускает

Question

Ниже сниппета я снял (спрятал) ul, у которого есть класс «dpx» (выпадающее меню), когда вы щелкните в любом месте документа, кроме элемента, который имеет класс «with_dpx» и его дочерние элементы/потомки, однако, когда я пытался скрыть (slideUp) его, щелкнув любой элемент li внутри ul, который имеет класс «dpx» (выпадающий список), он сделал 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(); 
    }); 

Используйте нет ("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(); 

     } 
    });