Javascript 保持最初隐藏的表单可见，直到在jQuery中将鼠标从中移出

我有一个搜索图标和搜索表单。表单最初是隐藏的。将鼠标悬停在搜索图标上，搜索表单应滑入。当鼠标从图标中滑出时，它将滑出。而且，在鼠标从窗体主体中移出之前，窗体将保持可见。我已写了以下文件—

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>

代码在页面中

---

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

出现此问题是因为您的鼠标离开

#search

元素以到达

#searchform

元素。根据您的布局，您可以在一个区域中同时包含这两个部分，如下所示：

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

以下是一个例子：

此外，通过如下方式分配变量，可以避免多次重新选择相同的元素：

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

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

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

---

问题是，当鼠标离开

#search

元素时（无论是否进入

#searchform

元素），会触发事件以滑动

#searchform

元素。您应该使用多个选择器来防止这种行为。这里已经解释过了：当关注输入字段时，它仍然会消失。您可以在外部容器或主体的

鼠标上方或
鼠标下方折叠搜索表单。尝试将
$（“#表单区域”）.mouseleave
替换为
$（“body”）.mouseenter
$("#form-area").mouseenter(function() {
    $("#searchform").slideDown();
});

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

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

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

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