Question

我正在为客户修改drupal 7网站，并且遇到了尝试让jQuery登录框根据需要正常工作的问题。

您可以在http://www.tztesting.com

查看该网站的有效版本

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

当我将鼠标悬停在登录链接上时，我可以打开盒子，没有问题，当我离开盒子而没有填写表格时，我可以让盒子关闭。我遇到的问题是在填写表格之前填写的框。据我所知，这种情况正在发生，因为我没有正确使用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事件来触发和调用淡出功能，我将不胜感激

此致

理查德

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

jQuery悬停框关闭问题

1 个答案: