пользовательский выпадающий элемент keep hiding

Question

ниже - это мой фрагмент, так как вы можете видеть, что всплывающий элемент (настраиваемый выпадающий список) скрывается, даже я не позволяю ему скрываться, когда вы нажимаете на него. Я хочу, чтобы он не скрывал его, когда нажимал на него или на какой-либо из его дочерних элементов, на какие-либо идеи?

$(document).ready(function(){ 
 
    $(document).on("click", ".has_dp a", function(e){ 
 
     
 
    $(".thehide").hide(); 
 
    
 
     //$(this).parents(".has_dp").find(".dp_container").css({ 'top' : $(this).offset().top + 5 + 'px','left' : $(this).offset().left + 'px'}); 
 
     $(this).parents(".has_dp").find(".dp_container").css({ 'min-width' : $(this).parents('.has_dp').width() + 'px' }); 
 
     $(this).parents(".has_dp").find(".dp_container").fadeIn(200); 
 
     e.preventDefault(); 
 
    }); 
 
    
 
    $(document).on("mousedown touchstart",function (e) { 
 
     var container = $(".dp_container"); 
 
     if (container.has(e.target).length === 0) { 
 
      container.fadeOut(200); 
 
      
 
     } 
 
    }); 
 
    
 
});

/* select branch */ 
 
.dp_selectbranch ul, .dp_selectemployee ul{border: 1px solid #ccc; padding: 3px 5px; background: #ffffff;} 
 
.dp_selectbranch ul .dp_container a, .dp_selectemployee ul .dp_container a{text-decoration: none; color: #555555;} 
 
.dp_selectbranch ul .dp_container a:hover, .dp_selectemployee ul .dp_container a:hover{color: #76b729;} 
 

 
a, span, .transation{-webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;} 
 
.list_style_none{list-style: none !important;} 
 
.thehide{display: none;} 
 
.extend{max-width: 100%;max-height: 100%;} 
 
.clear{clear: both; float: none;} 
 
.display_none{display: none;} 
 
.display_block{display: block;} 
 
.display_table{display: table;} 
 
.display_inline_table{display: inline-table;} 
 
.align_left{float: left;} 
 
.align_right{float: right;} 
 
.center{margin-left: auto !important; margin-right: auto !important;} 
 
.res_divider{height: 10px; clear: both; float: none;display:none;} 
 
.divider{height: 15px; clear: both; float: none;} 
 
/* padding */ 
 
.padding_zero{padding: 0px !important;} 
 
.padding_2px{padding: 2px !important;} 
 
.padding_3px{padding: 3px !important;} 
 
.padding_4px{padding: 4px !important;} 
 
.padding_5px{padding: 5px !important;} 
 
.padding_6px{padding: 6px !important;} 
 
.padding_7px{padding: 7px !important;} 
 
.padding_8px{padding: 8px!important;} 
 
.padding_9px{padding: 9px!important;} 
 
.padding_10px{padding: 10px!important;} 
 
.padding_11px{padding: 11px!important;} 
 
.padding_12px{padding: 12px!important;} 
 
.padding_13px{padding: 13px!important;} 
 
.padding_14px{padding: 14px!important;} 
 
.padding_15px{padding: 15px!important;} 
 
.padding_16px{padding: 16px!important;} 
 
.padding_17px{padding: 17px!important;} 
 
.padding_18px{padding: 18px!important;} 
 
.padding_19px{padding: 19px!important;} 
 
.padding_20px{padding: 20px!important;} 
 
.padding_top0{padding-top: 0px !important;} 
 
.padding_top2px{padding-top: 2px!important;} 
 
.padding_top3px{padding-top: 3px!important;} 
 
.padding_top4px{padding-top: 4px!important;} 
 
.padding_top5px{padding-top: 5px !important;} 
 
.padding_top6px{padding-top: 6px !important;} 
 
.padding_top7px{padding-top: 7px !important;} 
 
.padding_top8px{padding-top: 8px !important;} 
 
.padding_top9px{padding-top: 9px !important;} 
 
.padding_top10px{padding-top: 10px !important;} 
 
.padding_top11px{padding-top: 11px !important;} 
 
.padding_top12px{padding-top: 12px !important;} 
 
.padding_top13px{padding-top: 13px !important;} 
 
.padding_top14px{padding-top: 14px !important;} 
 
.padding_top15px{padding-top: 15px !important;} 
 
.padding_top16px{padding-top: 16px !important;} 
 
.padding_top17px{padding-top: 17px !important;} 
 
.padding_top18px{padding-top: 18px !important;} 
 
.padding_top19px{padding-top: 19px !important;} 
 
.padding_top20px{padding-top: 20px !important;} 
 
.padding_bottom0{padding-bottom: 0px !important;} 
 
.padding_bottom2px{padding-bottom: 2px !important;} 
 
.padding_bottom3px{padding-bottom: 3px !important;} 
 
.padding_bottom4px{padding-bottom: 4px !important;} 
 
.padding_bottom5px{padding-bottom: 5px !important;} 
 
.padding_bottom6px{padding-bottom: 6px !important;} 
 
.padding_bottom7px{padding-bottom: 7px !important;} 
 
.padding_bottom8px{padding-bottom: 8px !important;} 
 
.padding_bottom9px{padding-bottom: 9px !important;} 
 
.padding_bottom10px{padding-bottom: 10px !important;} 
 
.padding_bottom11px{padding-bottom: 11px !important;} 
 
.padding_bottom12px{padding-bottom: 12px !important;} 
 
.padding_bottom13px{padding-bottom: 13px !important;} 
 
.padding_bottom14px{padding-bottom: 14px !important;} 
 
.padding_bottom15px{padding-bottom: 15px !important;} 
 
.padding_bottom16px{padding-bottom: 16px !important;} 
 
.padding_bottom17px{padding-bottom: 17px !important;} 
 
.padding_bottom18px{padding-bottom: 18px !important;} 
 
.padding_bottom19px{padding-bottom: 19px !important;} 
 
.padding_bottom20px{padding-bottom: 20px !important;} 
 
.padding_left0{padding-left: 0px !important;} 
 
.padding_left2px{padding-left: 2px !important;} 
 
.padding_left3px{padding-left: 3px !important;} 
 
.padding_left4px{padding-left: 4px !important;} 
 
.padding_left5px{padding-left: 5px !important;} 
 
.padding_left6px{padding-left: 6px !important;} 
 
.padding_left7px{padding-left: 7px !important;} 
 
.padding_left8px{padding-left: 8px !important;} 
 
.padding_left9px{padding-left: 9px !important;} 
 
.padding_left10px{padding-left: 10px !important;} 
 
.padding_left11px{padding-left: 11px !important;} 
 
.padding_left12px{padding-left: 12px !important;} 
 
.padding_left13px{padding-left: 13px !important;} 
 
.padding_left14px{padding-left: 14px !important;} 
 
.padding_left15px{padding-left: 15px !important;} 
 
.padding_left16px{padding-left: 16px !important;} 
 
.padding_left17px{padding-left: 17px !important;} 
 
.padding_left18px{padding-left: 18px !important;} 
 
.padding_left19px{padding-left: 19px !important;} 
 
.padding_left20px{padding-left: 20px !important;} 
 
.padding_right0{padding-right: 0px !important;} 
 
.padding_right2px{padding-right: 2px !important;} 
 
.padding_right3px{padding-right: 3px !important;} 
 
.padding_right4px{padding-right: 4px !important;} 
 
.padding_right5px{padding-right: 5px !important;} 
 
.padding_right6px{padding-right: 6px !important;} 
 
.padding_right7px{padding-right: 7px !important;} 
 
.padding_right8px{padding-right: 8px !important;} 
 
.padding_right9px{padding-right: 9px !important;} 
 
.padding_right10px{padding-right: 10px !important;} 
 
.padding_right11px{padding-right: 11px !important;} 
 
.padding_right12px{padding-right: 12px !important;} 
 
.padding_right13px{padding-right: 13px !important;} 
 
.padding_right14px{padding-right: 14px !important;} 
 
.padding_right15px{padding-right: 15px !important;} 
 
.padding_right16px{padding-right: 16px !important;} 
 
.padding_right17px{padding-right: 17px !important;} 
 
.padding_right18px{padding-right: 18px !important;} 
 
.padding_right19px{padding-right: 19px !important;} 
 
.padding_right20px{padding-right: 20px !important;} 
 
/* margin */ 
 
.margin_zero{margin: 0px !important;} 
 
.margin_2px{margin: 2px !important;} 
 
.margin_3px{margin: 3px !important;} 
 
.margin_4px{margin: 4px !important;} 
 
.margin_5px{margin: 5px !important;} 
 
.margin_6px{margin: 6px !important;} 
 
.margin_7px{margin: 7px !important;} 
 
.margin_8px{margin: 8px !important;} 
 
.margin_9px{margin: 9px !important;} 
 
.margin_10px{margin: 10px !important;} 
 
.margin_11px{margin: 11px !important;} 
 
.margin_12px{margin: 12px !important;} 
 
.margin_13px{margin: 13px !important;} 
 
.margin_14px{margin: 14px !important;} 
 
.margin_15px{margin: 15px !important;} 
 
.margin_16px{margin: 16px !important;} 
 
.margin_17px{margin: 17px !important;} 
 
.margin_18px{margin: 18px !important;} 
 
.margin_19px{margin: 19px !important;} 
 
.margin_20px{margin: 20px !important;} 
 
.margin_left0{margin-left: 0px !important;} 
 
.margin_left2px{margin-left: 2px !important;} 
 
.margin_left3px{margin-left: 3px !important;} 
 
.margin_left4px{margin-left: 4px !important;} 
 
.margin_left5px{margin-left: 5px !important;} 
 
.margin_left6px{margin-left: 6px !important;} 
 
.margin_left7px{margin-left: 7px !important;} 
 
.margin_left8px{margin-left: 8px !important;} 
 
.margin_left9px{margin-left: 9px !important;} 
 
.margin_left10px{margin-left: 10px !important;} 
 
.margin_left11px{margin-left: 11px !important;} 
 
.margin_left12px{margin-left: 12px !important;} 
 
.margin_left13px{margin-left: 13px !important;} 
 
.margin_left14px{margin-left: 14px !important;} 
 
.margin_left15px{margin-left: 15px !important;} 
 
.margin_left16px{margin-left: 16px !important;} 
 
.margin_left17px{margin-left: 17px !important;} 
 
.margin_left18px{margin-left: 18px !important;} 
 
.margin_left19px{margin-left: 19px !important;} 
 
.margin_left20px{margin-left: 20px !important;} 
 
.margin_right0{margin-right: 0px !important;} 
 
.margin_right2px{margin-right: 2px !important;} 
 
.margin_right3px{margin-right: 3px !important;} 
 
.margin_right4px{margin-right: 4px !important;} 
 
.margin_right5px{margin-right: 5px !important;} 
 
.margin_right6px{margin-right: 6px !important;} 
 
.margin_right7px{margin-right: 7px !important;} 
 
.margin_right8px{margin-right: 8px !important;} 
 
.margin_right9px{margin-right: 9px !important;} 
 
.margin_right10px{margin-right: 10px !important;} 
 
.margin_right11px{margin-right: 11px !important;} 
 
.margin_right12px{margin-right: 12px !important;} 
 
.margin_right13px{margin-right: 13px !important;} 
 
.margin_right14px{margin-right: 14px !important;} 
 
.margin_right15px{margin-right: 15px !important;} 
 
.margin_right16px{margin-right: 16px !important;} 
 
.margin_right17px{margin-right: 17px !important;} 
 
.margin_right18px{margin-right: 18px !important;} 
 
.margin_right19px{margin-right: 19px !important;} 
 
.margin_right20px{margin-right: 20px !important;} 
 
.margin_top0{margin-top: 0px !important;} 
 
.margin_top2px{margin-top: 2px !important;} 
 
.margin_top3px{margin-top: 3px !important;} 
 
.margin_top4px{margin-top: 4px !important;} 
 
.margin_top5px{margin-top: 5px !important;} 
 
.margin_top6px{margin-top: 6px !important;} 
 
.margin_top7px{margin-top: 7px !important;} 
 
.margin_top8px{margin-top: 8px !important;} 
 
.margin_top9px{margin-top: 9px !important;} 
 
.margin_top10px{margin-top: 10px !important;} 
 
.margin_top11px{margin-top: 11px !important;} 
 
.margin_top12px{margin-top: 12px !important;} 
 
.margin_top13px{margin-top: 13px !important;} 
 
.margin_top14px{margin-top: 14px !important;} 
 
.margin_top15px{margin-top: 15px !important;} 
 
.margin_top16px{margin-top: 16px !important;} 
 
.margin_top17px{margin-top: 17px !important;} 
 
.margin_top18px{margin-top: 18px !important;} 
 
.margin_top19px{margin-top: 19px !important;} 
 
.margin_top20px{margin-top: 20px !important;} 
 
.margin_bottom0{margin-bottom: 0px !important;} 
 
.margin_bottom2px{margin-bottom: 2px !important;} 
 
.margin_bottom3px{margin-bottom: 3px !important;} 
 
.margin_bottom4px{margin-bottom: 4px !important;} 
 
.margin_bottom5px{margin-bottom: 5px !important;} 
 
.margin_bottom6px{margin-bottom: 6px !important;} 
 
.margin_bottom7px{margin-bottom: 7px !important;} 
 
.margin_bottom8px{margin-bottom: 8px !important;} 
 
.margin_bottom9px{margin-bottom: 9px !important;} 
 
.margin_bottom10px{margin-bottom: 10px !important;} 
 
.margin_bottom11px{margin-bottom: 11px !important;} 
 
.margin_bottom12px{margin-bottom: 12px !important;} 
 
.margin_bottom13px{margin-bottom: 13px !important;} 
 
.margin_bottom14px{margin-bottom: 14px !important;} 
 
.margin_bottom15px{margin-bottom: 15px !important;} 
 
.margin_bottom16px{margin-bottom: 16px !important;} 
 
.margin_bottom17px{margin-bottom: 17px !important;} 
 
.margin_bottom18px{margin-bottom: 18px !important;} 
 
.margin_bottom19px{margin-bottom: 19px !important;} 
 
.margin_bottom20px{margin-bottom: 20px !important;} 
 
/* radius */ 
 
.radius_3px{ 
 
\t -webkit-border-radius: 3px; 
 
\t -moz-border-radius: 3px; 
 
\t border-radius: 3px; 
 
} 
 
/* dropdown */ 
 
.dp_container{ 
 
    z-index: 99999; 
 
    position: absolute; 
 
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3; 
 
    -webkit-animation-duration: 200ms; /* Chrome, Safari, Opera */ 
 
    animation-duration: 200ms; 
 
    margin-top: -33px; 
 
} 
 
.dp_container li{clear: both; float: none;} 
 
.dp_container li a{clear: both; border: none !important; font-size: 13px !important; padding: 5px 8px !important;} 
 
#white_shadow{ 
 
    background: rgba(255,255,255,0.7); 
 
    position: fixed; 
 
    z-index: 997; 
 
    top: 0px; 
 
    left: 0px; 
 
    display: none; 
 
} 
 
#dark_shadow{ 
 
    background: rgba(0,0,0,0.7); 
 
    position: fixed; 
 
    z-index: 997; 
 
    top: 0px; 
 
    left: 0px; 
 
    display: none; 
 
} 
 
#loading{ 
 
    font-size: 15px; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    position: fixed; 
 
    z-index: 998; 
 
} 
 
/* end of dropdown */ 
 
/* j ui */ 
 
.j_button{ 
 
    border: none; 
 
    padding: 5px 8px; 
 
    font-size: 13px; 
 
    display: block; 
 
} 
 
.center_content_parent{ 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.center_content_child{ 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.j_line{height: 1px; background: #ededed;} 
 
.j_border{border: 1px solid red;} 
 
/* end of j ui */ 
 
/* end of preset */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="display_table extend align_left dp_selectemployee"> 
 
            <ul class=" radius_3px extend clear padding_zero margin_zero list_style_none"> 
 
             <li class="has_dp list_style_none j_menu_text_replace j_menu_dp_out"> 
 
              <a href="#" class="img_wrapper extend clear display_table padding_6px center radius_circle"> 
 
               <span class="j_text display_block align_left c_black margin_right7px">Select Employee</span> 
 
               <span class="align_left display_block c_black"><i class="ion-arrow-down-b"></i></span> 
 
              </a> 
 
              <ul class="dp_container thehide bg_white padding_5px list_style_none overflow_auto" style="height: 400px;"> 
 
               
 
              </ul> 
 
             </li> 
 
            </ul> 
 
           </div>

Answer 1

Вы должны проверить, если целевое событие является контейнером (в дополнение к его детей), прежде чем решить, чтобы скрыть его (то есть добавить контейнер в список элементов, которые предотвратили бы исчезать).

Вот один из способов сделать это.

$(document).on("mousedown touchstart", function (e) { 
    var container = $(".dp_container"); 
    if (e.target !== container.get(0) && container.has(e.target).length === 0) { 
     container.fadeOut(200); 
    } 
}); 

Вы также можете сделать !container.is(e.target)