jQuery中下拉式選單mouseover和mouseout反覆觸發的解決方法

網路上找到的解決方法是改為mouseenter和mouseleave事件，改過之後還是不行。滑鼠滑過觸發區域，下拉選單會重複彈出、隱藏。

//purProduction为“购买产品”的id，showPurchase为下拉菜单的id
$("#purProduction").mouseenter(function() {
					$("#showPurchase").slideDown();					
				})
				$("#purProduction").mouseleave(function() {
					$("#showPurchase").slideUp();
				})
				$("#showPurchase").mouseenter(function(){
					$("#showPurchase").slideDown();
				})
				$("#showPurchase").mouseleave(function(){
					$("#showPurchase").slideUp();
				}) 				

<a class="name" id="purProduction" style="padding:20px;position:relative;left:1px;top:10px;">购买产品</a>

<div class="showDiv" id="showPurchase" style="position:absolute;left:595px;top:50px;">
			     <!-- 向上的箭头  -->
				<div class="outTri"></div>
				<div class="inTri"></div>


					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">查询价格</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">等级购买</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">经销商查询</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">合作加盟</a>

			</div>

關於你說的『反覆彈出』
其實是這樣的：滑鼠移到purProduction上，觸發彈出purProduction的mouseenter；此時滑鼠再移動到showPurchase上時，會觸發什麼事件呢？首先滑鼠離開了purProduction，觸發它的mouseleave，然後滑鼠進入showPurchase，觸發mouseenter……這還好，看起來也就收起一次再彈出一次而已，然而slideDown過程中也是會觸發事件的，當showPurchase在slideDown過程中反覆經過滑鼠附近的時候，就會反覆觸發滑鼠事件……

解決方法很簡單。最好的方法是棄用這套機制改用hover。當然如果你很不捨得你的程式碼想留用，那就要考慮用Interval來定時檢查了…比如這樣（不要怪我寫得醜，其實這事應該CSS定制）

//purProduction为“购买产品”的id，showPurchase为下拉菜单的id$("#showPurchase").slideUp();var show=false, showed=false;setInterval(function () {
  if (show && !showed) {
    $("#showPurchase").slideDown();
    showed=true;
  } else if (!show && showed) {
    $("#showPurchase").slideUp();
    showed=false;
  }}, 100);$("#purProduction").mouseenter(function() {
  show=true;})$("#purProduction").mouseleave(function() {
  show=false;})$("#showPurchase").mouseenter(function() {
  show=true;})$("#showPurchase").mouseleave(function(){
  show=false;})

是因為你的事件佇列裡面全是mouseover和mouseout的，要嘛使用:hover控制樣式，要嘛就像上面說的用stop方法去清空之前的事件佇列。

怎麼有種知乎變成StackOverflow 的感覺…

#這是因為滑鼠事件多次觸發之後，節點的動畫隊列裡堆積了多次slideDown 和slideUp，改成$('#showPurchase').stop(true).slideDown() 應該就好了。

兩種方法
第一種最簡單，把你的下拉選單和按鈕放到一個容器裡面，只需要給該容器綁定你說的兩個事件即可，其實你可以使用hover()，如果不是必須加效果還是用:hover比較簡單。
第二種結構不變的情況下實現起來略麻煩，需要使用setTimeout，一般tooltip的就是這樣子的實作。

以上是jQuery中下拉式選單mouseover和mouseout反覆觸發的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！