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

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

JSFiddle

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

$("#filter").hover(

    function () {

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

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


    }
);

Answer 2

在这里：http://jsfiddle.net/4Hdge/7/

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

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

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

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

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

});

Answer 3

我会说正确答案是给出的两个答案的组合：）

//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 4

为什么不在隐藏搜索之前添加if条件？

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