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

使用Ben 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方法存储相关搜索框悬停状态的代码。

$(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/

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

2 个答案: