jQuery悬停框关闭问题答案

【问题标题】：jQuery hover box close issuejQuery悬停框关闭问题
【发布时间】：2016-01-14 02:51:14
【问题描述】：

我正在为客户修改 drupal 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 的类中的文本块。

如果有人能告诉我一种方法，让用户填写并提交表单，而无需触发 mouseleave 事件并调用 fadeout 函数，我将不胜感激

【问题讨论】：

没有 jQuery('.login-overlay-container').mouseleave(function(){ 当您将鼠标悬停从登录链接移开时，该框只会关闭。我需要该框保持打开状态所以它可以完成，当你进入盒子时，你不再将鼠标悬停在打开盒子的链接上
你的意思是说问题是，如果用户试图输入一个电子邮件地址并且如果错误地鼠标从表单上移开，那么表单正在关闭？
一旦您尝试在表单的任一字段中输入任何内容，在您完成输入详细信息或单击提交按钮之前，该框就会关闭

标签： javascript jquery jquery-ui jquery-events

【解决方案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 是否有焦点。如果其中任何一个有focus，则不要关闭覆盖，否则将其关闭。

【讨论】：

哦..太棒了...太棒了...:)!