在jQuery中将最初隐藏的窗体保持可见，直到鼠标离开该窗体

Question

我有一个搜索图标和搜索表单。表单最初是隐藏的。当鼠标移到搜索图标上时，搜索表单应该会滑入。当鼠标从图标滑出时，它就会滑出来。并且窗体将保持可见，直到鼠标从窗体主体中移出。我写了以下内容-

html：

<li class="rightpartextra" id="search"><i class="fa fa-search" aria-hidden="true"></i><div class="text4">Search</div>

<div class="tools-search-form" id="searchform" style="display: none;">
   <div class=" form-horizontal searchblock" >
      <div class="col-md-9">  
         <input type="text" autocapitalize="off" autocorrect="off" class="form-control searchinput" placeholder="Search Term">
      </div>
      <div class="col-md-3">    
         <button type="submit" class="form-control submitbutton" name="submit" ><i class="fa fa-arrow-right"></i></button>
      </div>
   </div>
</div>

jQuery是：

$("#search").mouseenter(function() {
    $("#searchform").slideDown();
});
$("#search").mouseleave(function() {
    $("#searchform").slideUp();
});

代码在页面http://new.praavahealth.com/openings/3中

请帮我整理一下。提前感谢

Answer 1

出现问题的原因是，为了到达#searchform元素，鼠标离开了#search元素。根据您的布局，您可以将这两个内容包含在一个区域中，如下所示：

<div id="form-area">
    <ul>
        <li class="rightpartextra" id="search">
            <i class="fa fa-search" aria-hidden="true"></i> <div class="text4">Search</div>
        </li>
    </ul>

    <div class="tools-search-form" id="searchform" style="display: none;">
        <div class=" form-horizontal searchblock" >
            <div class="col-md-9">  
                <input type="text" autocapitalize="off" autocorrect="off" class="form-control searchinput" placeholder="Search Term">
            </div>
            <div class="col-md-3">    
                <button type="submit" class="form-control submitbutton" name="submit" ><i class="fa fa-arrow-right"></i></button>
            </div>
        </div>
    </div>

</div>

然后在整个#form-area上侦听mouseenter和mouseleave事件

$("#form-area").mouseenter(function() {
    $("#searchform").slideDown();
});

$("#form-area").mouseleave(function() {
    $("#searchform").slideUp();
});

下面是一个示例：https://jsfiddle.net/oLqxt1c8/2/

此外，通过如下所示指定变量，可以避免多次重新选择相同的元素：

var formArea = $('#form-area');
var searchForm = $('#searchform');

formArea.mouseenter(function() {
    searchForm.slideDown();
});

formArea.mouseleave(function() {
    searchForm.slideUp();
});