javascript - 自定义下拉元素保持隐藏

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{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	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)