我创建了一个自定义下拉菜单,一切正常,除非我希望下拉菜单被隐藏(slideUp),如果不是下拉列表 div 和它的所有子项都被点击的话。为了更清晰,我打算隐藏下拉菜单,如果不是单击下拉菜单(单击正文或文档上除下拉菜单及其子项之外的任何位置)。以下是我的片段,但遗憾的是,我的尝试没有奏效。非常感谢任何帮助、建议、建议、想法和线索。谢谢!
$(document).ready(function(){
$(".with_dpx").click(function(e){
$(".dpx", this).slideDown();
e.preventDefault();
});
$(document).on("click", function(event){
if(event.target.is(".dpx")){
alert("asdas");
}
});
});
.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>
最佳答案
你可以试试这个:-
$(document).on("click", function(event){
if($(event.target).is(".dpx")||$(event.target).closest(".dpx").length){
//or this will also work
//$(event.target).parents(".dpx").length
alert("asdas");
}
});
关于javascript - 当单击指定的 div 以外的其他内容时,然后隐藏下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31155728/