保持最初隱藏的形式可見，直到從jQuery中將鼠標移出它

我有一個搜索圖標和搜索表單。表單最初是隱藏的。將鼠標懸停在搜索圖標上時，搜索表單應滑入。並且從鼠標移出圖標時，它將滑出。此外，表單將保持可見狀態，直到從表單主體中移出。我寫了下面的 -保持最初隱藏的形式可見，直到從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>

和jQuery是：

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

的代碼是在頁面http://new.praavahealth.com/openings/3

請幫我整理出來。在此先感謝

來源

2017-10-12 Muntashir Are Rahi

問題是，當鼠標離開'＃search'元素（不管它是否進入'＃searchform'元素），觸發事件來上傳'＃searchform'元素。 –

您應該使用多重選擇器來防止此行爲。這已經在這裏解釋：https://stackoverflow.com/questions/5018749/how-to-detect-mouseleave-on-two-elements-at-once –

歡迎來到堆棧溢出！此問題已被關閉/可能會被重複關閉。如果來自副本的答案沒有完全解決您的問題，請編輯您的問題以告訴我們爲什麼。 –

問題發生是因爲您的鼠標離開#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>

然後你mouseenter和mouseleave事件監聽整個#form-area

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

來源

2017-10-12 20:36:07

雖然重點放在輸入字段上，但它消失了。 –

您可以摺疊外部容器或身體的「mouseover」或「mouseenter」上的搜索表單。嘗試用'$（「body」）替換$（「＃form-area」）。mouseleave'。mouseenter' – 2017-10-12 20:56:12

@SamuelLiew這個問題不是重複的。多重選擇不是這裏的答案。當離開第一個元素時會出現問題。多重選擇可能會稍微更有效但會產生相同的問題。 – 2017-10-13 18:53:04

保持最初隱藏的形式可見，直到從jQuery中將鼠標移出它

回答

相關問題