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

Question

我已经连续研究了大约3天，我开始感到真正的绝望。此外，我不得不说，我是JQuery的新手，我只是偶尔做一些小事情。所以，事情是这样的：我有这个搜索表单（在Wordpress中）。我希望它一开始就隐藏起来。当鼠标悬停在菜单链接上时，它会隐藏链接并显示搜索表单。当鼠标离开时，它隐藏搜索表单并再次显示链接。我已经完成了，这就是代码：

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/