[英]Hide an element when a user clicks outside of it
$( document ).on('click', '.toggle_comments', function( event ){
event.preventDefault();
var container = $('div[name="comments"]');
if ( container.css('display') == 'block' ) {
container.hide();
return;
}
container.fadeIn(500);
});
当单击.toggle_comments
,容器会淡入。有没有办法做某事,即淡出,如果在显示块时单击容器外的任何内容? 显然,请注意, .toggle_comments
首先在它之外。 所以它需要是一个直播事件,只有当容器处于状态时才触发,如果display:block
。
您可以将mousedown
事件绑定到document
并检查单击的元素是否不是div[name="comments"]
如下所示:
$(document).mousedown(function(event)
{
var commentSection = $('div[name="comments"]');
if(!$(commentSection).is($(event.target)) && !$(event.target).closest($(commentSection)).length)
$(commentSection).fadeOut();
});
如果点击不同的元素,只需做不同的事情
$( document ).on('click', function( event ){
event.preventDefault();
var target = $(event.target);
var container = $('div[name="comments"]');
if ( target.closest('.toggle_comments').length > 0 ) {
if ( container.is(':visible') ) {
container.hide();
} else {
container.fadeIn(500);
}
} else if (target.closest(container).length === 0 && container.is(':visible')) {
container.fadeOut(500);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.