悬停时显示和隐藏表格行，最初隐藏，如果输入不隐藏，则不会隐藏

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(); 


    } 
);