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/