javascript - jQuery悬停框关闭问题

Question

我正在为客户修改 d​​rupal 7 网站，并在尝试让 jQuery 登录框按要求正常工作时遇到问题。

您可以在http://www.tztesting.com查看该网站的工作版本

这个想法是，当用户将鼠标悬停在登录链接上时，应该会出现一个登录框。当用户离开鼠标悬停或提交登录表单时，该框必须关闭。

当我将鼠标悬停在“登录”链接上时，我可以毫无问题地打开该框，而当我在不填写表单的情况下离开该框时，我可以让该框关闭。我遇到的问题是在填写表格之前先完成方框。据我所知，发生这种情况是因为我没有正确使用 mouseleave 事件来关闭该框。

这是我的 JS:

jQuery( document ).ready(function( $ ) {

    jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
        var $loginContainer = jQuery(loginContainer);
        $loginContainer.fadeIn();
    }, function() {
        jQuery('.login-overlay-container').mouseleave(function(){
            var $loginContainer = jQuery(loginContainer);
            $loginContainer.fadeOut();
        });
    });
}); 

看起来可怕的选择器是因为 Drupal 构建其菜单结构的方式。

在 html 中，名为“login-overlay-container”的类中有一个文本 block 。

如果有人可以向我展示一种方法，允许用户填写并提交表单，而无需触发和调用 fadeout 函数而触发 mouseleave 事件，我将不胜感激

Answer 1

您可以尝试以下方法吗:

jQuery( document ).ready(function( $ ) {
    jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
        var $loginContainer = jQuery(loginContainer);
        $loginContainer.fadeIn();
    }, function() {
       jQuery('.login-overlay-container').mouseleave(function(){
            var hasFocus = false;
            jQuery('.login-overlay-container input').each(function(){
                if($(this).is(":focus"))
                {
                    hasFocus = true;
                }
            });
            if(!hasFocus){
                var $loginContainer = jQuery(loginContainer);
                $loginContainer.fadeOut();
            }
       });
    });
}); 

在这种方法中，我们检查 textfield 或 checkbox 是否具有焦点。如果其中任何一个具有焦点，则不要关闭叠加层，否则将其关闭。