Question

我必须显示一个下拉菜单，现在我想隐藏在DOM中的anoher元素（不是下拉列表或下拉列表的子项）时。

（隐藏dropdpown元素！== dropdown || dropdown的子节点集中在DOM中）

我尝试使用focusout()但没有结果：

$('a').on('click',function(){
        $('.drop.user-menu').fadeIn(); 
});

$('.drop.user-menu').on('focusout',function(){
        $(this).fadeOut();
        alert('antani');
});

任何想法？

jsfiddle here：example

Answer 1

在这种情况下，

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();
    }
 });

The above script done with click in this fiddle

Answer 2

没有触发focus或focusout个事件，因为您没有在表单字段上操作。

这可能是你想要的：How do I detect a click outside an element?

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所指出的，这对键盘用户来说并不是很友好。考虑为用户实现一种使用键盘快捷键打开和关闭菜单的方法。

Answer 3

DIV无法获得或失去焦点（除非它有tabindex）。您必须为tabindex添加div.drop.user-menu或在.focus()中添加可聚焦元素。请参阅Which HTML elements can receive focus?。

然后你还必须明确地给予该元素（或其中的元素）焦点（使用{{1}}），因为简单地淡化它不会使焦点成为焦点。

当元素模糊时，检查新的活动元素是否仍然是菜单的一部分。如果不是，请淡出菜单。

See a working example

Answer 4

你可以模糊，是你想要的吗？试试这个：

$('.drop.user-menu').on('blur',function(){
   $(this).fadeOut();
   alert('antani');
});

jQuery - 在DOM元素聚焦时隐藏下拉列表

4 个答案:

更新

更新