懸停時顯示和隱藏表格行，最初隱藏，如果輸入不隱藏，則不會隱藏

Question

我有一個包含輸入行的HTML表格。當我將鼠標懸停在行上時，我想展開該行並顯示輸入，然後在未徘徊時摺疊。但是，我希望行開始摺疊，並且如果輸入中存在值，我不希望行摺疊。

這裏是一個小提琴：

http://jsfiddle.net/4Hdge/

<table style="width:300px; background-color:#d3d3d3"> 
<tr id="filter" style="background-color:blue"> 
    <td><input id="search" placeholder="Search" style="width:100px"/></td> 
    <td></td> 
    <td></td> 
</tr> 
<tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
</tr> 
</table> 


$("#filter").hover(

function() { 

     $("#search").show(); 

    }, 
function() { 

     $("#search").hide(); 

    } 
); 

Answer 1

我要說的正確答案是給出兩個答案的組合:)

//var tableRow = $("#search").parent().parent(); 
$("#search").hide(); /*hide the search input initially*/ 
$("#filter").hover(
    function() { 
    $("#search").show(); 
    }, 
    function() { 
    if($("#search").val().trim() == "") //only hide the search box is empty 
     $("#search").hide(); 
    } 
); 

編輯

$("#search").hide(); /*hide the search input initially*/ 
$("#filter").hover(
    function() { 
    $("#search").slideToggle(); 
    }, 
    function() { 
    if($("#search").val().trim() == "") //only hide the search box if it is empty 
     $("#search").slideToggle(); 
    } 
); 

Answer 2

你爲什麼不只是躲在搜索之前添加如果條件？

if($("#search").val()=="") $("#search").hide(); 

Answer 3

在這裏你去：http://jsfiddle.net/4Hdge/7/

$("#search").hide(); 

$(".filter").mouseenter (function() { 

     $("#search").show(); 

}); 
$('.filter').mouseleave(function() { 

    $("#search").hide(); 

}); 

Answer 4

JSFiddle

$("#search").hide(); 

$("#filter").hover(

    function() { 

      $("#search").show(); 

    }, 
    function() { 
     if($('#search').val()=="") 
     $("#search").hide(); 


    } 
);