Jquery表单-在输入区域上写入时显示/隐藏/保持可见

我已经连续研究了大约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？），但如果他们从未在窗体中单击，则使窗体消失）。我现在看不清楚了，我不知道这是真的很简单还是根本不可能做到。

---

任何提示都非常受欢迎。

使用本·阿尔曼的代码片段-

然后您可以执行以下操作：

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

  return false;
});

编辑：更新代码以使用

.data

方法存储相应的搜索框悬停状态

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

---

试着这样做：

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

---

您可能还想看看toogle（）来稍微整理一下您的代码：

自1.6版以来，“：focus”选择器是jQuery的一部分，请参阅@marc.d-感谢您指出这一点。我不知道它被包括在内。谢谢！这在Safari和Chrome中有效，但在firefox中，表单在悬停后保持不变…？@Kit-请尝试更新的代码。我随便重写了一下。即使鼠标不再悬停在搜索框上，搜索框现在仍应保持可见。此外，如果输入框和输入按钮没有焦点，并且鼠标没有悬停在搜索框上，搜索框现在将隐藏。@Kit-这里有一个jsfiddle.net页面供您在上面试用，谢谢Matthew，但这也不起作用，表单在悬停时会显示并在那之后保持不变。我将您的代码放在jQuery（“#切换搜索”）之后；返回false； });为什么切换比显示更好？：）再次感谢！尝试一次输入，看看会发生什么。切换将允许您在两种状态之间切换，而不是单独设置它们。

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