我要显示一个下拉菜单,现在我想隐藏,当另一个元素(不是下拉或下拉的孩子)在DOM的焦点。
(当element !== dropdown||dropdown的子元素集中在DOM中时隐藏dropdown)
我尝试与focusout()
没有结果:
$('a').on('click',function(){
$('.drop.user-menu').fadeIn();
});
$('.drop.user-menu').on('focusout',function(){
$(this).fadeOut();
alert('antani');
});
任何想法?
event.target()
在这种情况下很有用:
$('.drop.user-menu').on('focusout',function(e){
if(e.target !== this){
$(this).fadeOut();
alert('antani');
}
});
更新:
看看是否有帮助:
$('.a').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeToggle();
});
$('.drop.user-menu').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeIn();
});
$(document).on('click', function (e) {
if (e.target !== $('.drop.user-menu') && e.target !== $('.a')) {
$('.drop.user-menu').fadeOut();
}
});
上面的脚本在这里用click完成
div不能聚焦或失去焦点(除非它有tabindex
)。您必须给它一个tabindex
或添加一个可聚焦的元素到您的div.drop.user-menu
。参见哪些HTML元素可以接收焦点?
你还必须明确地给予该元素(或其中的一个元素)焦点(与.focus()
),因为简单地淡出它不会给它焦点。
当元素模糊时,检查新的活动元素是否仍然是菜单的一部分。如果不是,淡出菜单。
没有触发focus
或focusout
事件,因为您没有操作表单字段
这可能就是你想要的:我如何检测元素外部的点击?
var menu = $('.drop.user-menu');
menu.on('click',function(e){
e.stopPropagation(); // stop clicks on menu from bubbling to document
});
$('a').on('click', function (e) {
menu.fadeIn();
e.stopPropagation(); // stop clicks on <a> from bubbling to document
});
$(document).on('click',function(e){
// any other click
if (menu.is(":visible")) {
menu.fadeOut();
}
});
http://jsfiddle.net/BBxEN/10/更新
正如Derek指出的,这对键盘用户来说不是很友好。考虑为用户实现一种使用键盘快捷键打开和关闭菜单的方法。
你可以用模糊来表示,这是你想要的吗?
试试这个:
$('.drop.user-menu').on('blur',function(){
$(this).fadeOut();
alert('antani');
});