当DOM元素被聚焦时隐藏下拉菜单

jQuery - hide dropdown when DOM element is focused

本文关键字：隐藏 下拉菜单 聚焦 DOM 元素      更新时间：2023-09-26

我要显示一个下拉菜单，现在我想隐藏，当另一个元素(不是下拉或下拉的孩子)在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');
});
相关文章：