Jquery Form - 在输入区域显示/隐藏/保持可见状态

Question

我已经研究了大约3天不间断，我开始感到真正的绝望。 另外我必须说，我是JQuery的新手，我只是时不时地做些小事情。 所以，这是事情：我有这个搜索表单（在Wordpress中）。我希望它在开始时被隐藏。在鼠标悬停菜单链接上，它隐藏链接并显示搜索表单。在mouseleave上，它隐藏搜索表单并再次显示链接。我已经做到了这一点，这是代码：

jQuery(document).ready(function(){ 
    jQuery('#toggle-search').hide(); 
    jQuery(".buscar").mouseenter(function(){ 
    jQuery('#toggle-search').show('fast'); 

    return false; 
    }); 

    jQuery(".inputbuscar").click(function(){ 
    jQuery('#toggle-search').show('fast'); 

    return false; 
    }); 

    jQuery(".buscar").mouseleave(function(){ 
    jQuery('#toggle-search').hide('fast'); 

    return false; 
    }); 
}); 

这将是HTML

<li id="search-jq" class="buscar"> 
    <a href="#">Buscar</a> 
    <div id="toggle-search"> 
    <form role="search" method="get" id="searchform" action="" > 
     <div class="form-buscar"> 
     <label class="screen-reader-text" for="s"></label> 
     <input type="text" name="s" id="s" class="inputbuscar" onclick="this.value='';" name="s" id="s" /> 
     <input type="submit" id="searchsubmit" value="" class="lupa"/> 
     </div> 
    </form> 
    </div> 

CSS是不是真的有关，我不施加任何显示：无。

我不能做的是让窗体仍然可见，如果有人正在编写并将鼠标移出该区域（即窗体在写入时保持可见状态（onclick？），尽管鼠标位于其他位置，但如果他们从未在表单中点击过，则可以让表单消失）。我现在看起来很不乐观，我不知道这是非常简单还是不可行。 任何提示都非常受欢迎。

Answer 1

使用本Alman的代码片段 - https://gist.github.com/450017

jQuery.expr[':'].focus = function(elem) { 
    return elem === document.activeElement && (elem.type || elem.href); 
}; 

然后你就可以做到以下几点：

jQuery(".buscar").mouseleave(function(){ 
    if($('#toggle-search input:focus').length == 0) { 
    jQuery('#toggle-search').hide('fast'); 
    } 

    return false; 
}); 

编辑：更新代码，使用.data方法来存储corrent搜索框悬停状态。

$(document).ready(function(){ 
    var $search = $('#toggle-search'); 
    var $search_trigger = $(".buscar"); 
    $search.hide().data('hover', false); 

    $search_trigger.mouseenter(function(){ 
    $search.show('fast').data('hover', true); 
    }).mouseleave(function(){ 
    if($search.find('input:focus').length == 0) { 
     $search.hide(); 
    } 
    $search.data('hover', false); 
    }); 

    $(".inputbuscar").click(function(){ 
    $search.show('fast'); 

    return false; 
    });  

    $search.find("input").focusout(function(){ 
    setTimeout(function() { 
     if($search.find('input:focus').length == 0 && $search.data('hover') == false) { 
     $search.hide('fast'); 
     }  
    }, 10); 
    }); 
}); 

Answer 2

尝试这样：

$("#searchform :input").focus(function(){ 
    $("#toggle-search").show(); 
}); 

您可能也想看看的toogle（）来清理你的代码位：http://api.jquery.com/toggle/