[英]Can I get an event if i click outside some div?
我有一个下拉列表,我没有使用HTML select元素,而是使用UL构建的。 现在它可以正常工作,但是我有一个问题,如果我单击下拉菜单,它将向下滑动,而当我选择一个元素时,它将向上滑动。 如果我单击列表的div(不选择任何元素),则要向上滑动列表。 我想知道是否可以使用某些JQuery做到这一点,但是我不知道如何将这种情况与JQuery事件侦听器链接起来? 有人可以帮我吗? 这是我的js文件:
$('.final_dates_list li').live('click',function(){
id = $(this).attr("id");
if(id == 'current')
{
$("#dates_list").find("li").each(function(){
//alert($(this).attr("id"));
$(this).show();
$(this).slideDown('slow');
});
}
else
{
this_id = $(this).attr("id");
$("#dates_list").find("li").each(function(){
//alert($(this).attr("id"));
$(this).hide();
$(this).slideUp('slow');
});
$("#dates_list").find("#current").show();
}
});
CSS:
div.final_dates_container ul.final_dates_list
{
float:right;
margin:0px;
padding:0px;
width:100px;
line-height: 21px;
overflow: hidden;
border: 1px solid #27292c;
border-radius: 4px;
background: url('bg.png') no-repeat right #494849;
box-shadow:inset 0 0 1px #393939;
-moz-box-shadow:inset 0 0 1px #393939;
-webkit-box-shadow:inset 0 01px #393939;
list-style-type:none;
color:#fff;
font-size:0.8em;
text-align:center;
font-weight:bold;
position:relative;
z-index:9999;
}
div.final_dates_container ul.final_dates_list li:hover
{
text-decoration:underline;
cursor:pointer;
}
div.final_dates_container ul.final_dates_list li
{
border-top:1px solid #eee;
}
<div class="final_dates_container">
<table border="1">
<tr>
<td>
<ul id="dates_list" class="final_dates_list">
<li id='current'>0</li>
<li id='-6' style='display:none'>-6</li>
<li id='-5' style='display:none'>-5</li>
<li id='-4' style='display:none'>-4</li>
<li id='-3' style='display:none'>-3</li>
<li id='-2' style='display:none'>-2</li>
<li id='-1' style='display:none'>-1</li>
<li id='0' style='display:none'>0</li>
<li id='1' style='display:none'>1</li>
<li id='2' style='display:none'>2</li>
<li id='3' style='display:none'>3</li>
<li id='4' style='display:none'>4</li>
<li id='5' style='display:none'>5</li>
<li id='6' style='display:none'>6</li>
</ul>
</td>
</tr>
</table>
</div>
尝试
$(document).on('click', function(){
if($(e.target).closest('.final_dates_container').length == 0){
//clicked outside
}
})
您需要在document
本身上放置一个事件处理程序,然后检查事件的目标是否是您要隐藏的元素。 尝试这个:
$(document).on('mouseup', function(e) {
var $list = $("#dates-list");
if (!$list.is(e.target) && $list.has(e.target).length === 0) {
$list.slideUp('slow');
}
});
注意:我使用mouseup
来完成此操作,因为通常会有一些带有click
hanlders的元素,其上带有preventDefault()
来停止传播。
用这个
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.