我想通过单击其中的关闭链接 或 单击该div外部的任何位置来隐藏div。
我正在尝试下面的代码,它可以通过单击正确的关闭链接来打开和关闭div,但是如果我在单击div以外的任何位置来关闭它时遇到问题。
$(".link").click(function() { $(".popup").fadeIn(300); } ); $('.close').click(function() { $(".popup").fadeOut(300); } ); $('body').click(function() { if (!$(this.target).is('.popup')) { $(".popup").hide(); } } ); <div class="box"> <a href="#" class="link">Open</a> <div class="popup"> Hello world <a class="close" href="#">Close</a> </div> </div>
另一种使您的jsfiddle减少错误的方法(需要双击打开)。
这不会在主体级别使用任何委托事件
设置tabindex="-1"为DIV .popup(以及样式CSS outline:0)
tabindex="-1"
outline:0
$(".link").click(function(e){ e.preventDefault(); $(".popup").fadeIn(300,function(){$(this).focus();}); }); $('.close').click(function() { $(".popup").fadeOut(300); }); $(".popup").on('blur',function(){ $(this).fadeOut(300); });