Question

我不得不承认，我绝对不是jQuery的天才，但看起来简单的解决方案却让我完全无法理解。

基本上我有一个下拉脚本处理嵌套的ul，以显示其父项的翻转。在其中一个嵌套ul中我有一个表单，如果输入表单中的任何输入，我想停止mouseleave事件。

这是原始代码：

$(document).ready(function() {  

/*------- navigation -------*/
$('.top_menu li').hover(function(){
    var index = $('.top_menu li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});
$('.top_menu li').mouseleave(function(){
        $(this).children('ul').hide();
}); 


$('.login_cart li,.login_cart_captu li').hover(function(){
    var index = $('.login_cart li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});

$('.login_cart li,.login_cart_captu li').mouseleave(function(){

        $(this).children('ul').hide();

});

});

我真的只关心脚本的.login_cart li部分 - 这是唯一一个包含该部分内容的部分。

我尝试使用简单的if / else语句来隐藏输入是否具有焦点但是到目前为止还没有起作用。

任何人都可以给我的任何帮助或对此有所了解都是绝对精彩的。

提前致谢！

Answer 1

您可以将表单元素的focus event绑定到{。3}} .login_cart li中的mouseleave事件的函数：

$("#<form-id> input").focus(function() {
    $(".login_cart li, .login_cart_captu li").unbind("mouseleave");
}

您只需要替换表单的ID，或者您可以使用您想要选择表单的任何选择器。

Answer 2

jQuery 1.6和更新版本：焦点内置。未经过.not（）测试，但已经测试了这个！在前面和.is（“：focus”），只是看起来更好.not（）;但两者都应该这样做。

 $('.login_cart li,.login_cart_captu li').mouseleave(function(){
       if ($("#<form-id> input").not(":focus")) {
           $(this).children('ul').hide();
       }
 });

检查输入是否处于焦点的简单方法，如果为true，则禁用mouseleave功能

2 个答案: