jQuery的鼠標離開衝突與另一個DIV

-1

請參考小提琴：Refer this JSFiddle jQuery的鼠標離開衝突與另一個DIV

$("#shopid").on({ 
    mouseenter: function() { 
     //stuff to do on mouse enter 
     $(".leftmenu").show(); 
    }, 
    mouseleave: function (e) { 
     //stuff to do on mouse leave 
     $(".leftmenu").hide(); 
    } 
});

如果鼠標在open menu area（shopid）進入菜單打開。如果我鼠標離開shopid菜單關閉。

如果鼠標位於菜單區域（ul li）內，子菜單不應該關閉。但我無法懸停子菜單（ul li）。它關閉。如何解決這個問題。

我嘗試了以下來實現此目的。但不工作

if ($(".leftmenu").has(e.target).length > 0) { $(".leftmenu").hide(); }

來源

2015-03-19 Sam Hanson

它必須有一個理由，爲什麼你不能發佈的jsfiddle鏈接沒有發佈有問題的代碼，d你在想什麼？！ – 2015-03-19 10:45:29

的問題是，mouseenter/mouseleave當項目被定位在所述DOM的不相關的部分不適合（按照更新的commment）和潛在的重疊。這會導致各種錯誤觸發或跳過事件。

相反，你可以聽兩個元素的祖先mousemove（我在沒有任何其他細節的情況下使用document）。然後使用closest測試鼠標下的項目是否是所需的面板之一（或它們的子項）。

的jsfiddle：https://jsfiddle.net/kLte6zzk/4/

$(document).on({ 
    mousemove: function (e) { 
     if (!$(e.target).closest('#shopid,.leftmenu').length) 
     { 
      $(".leftmenu").hide(); 
     } 
     else 
     { 
      $(".leftmenu").show(); 
     } 
    } 
});

可以進一步利用toggle

$(document).on({ 
    mousemove: function (e) { 
     $(".leftmenu").toggle($(e.target).closest('#shopid,.leftmenu').length > 0); 
    } 
});

的jsfiddle減少：https://jsfiddle.net/kLte6zzk/6/

來源

2015-03-19 10:51:39

不要將子菜單div放在容器內。它不是我的標準。所有都在不同的地方。如果（$。「leftmenu」）具有（e.target）.length> 0，我嘗試使用此代碼嘗試使用 { } \t \t \t \t $（「。leftmenu」）。隱藏（）; } – 2015-03-19 10:58:47

@Sam Hanson：基本上，你已經發布了一個JSFiddle，它看起來不像真實的情況......我們應該知道如何？ :) – 2015-03-19 11:03:16

我無法在這裏發佈我的整個代碼。所以只有我在這裏創建草稿。 :)你需要進一步的細節嗎？ – 2015-03-19 11:10:07

添加到這一點你的CSS第一

#shopid ul { 
    margin-top: 150px; 
}

變化

<div id="shopid" style="width:300px; height:150px; background-color:#990000">openmenu</div>

到

<div id="shopid" style="width:300px; height:150px; background-color:#990000">openmenu

和名單後關閉上述分隔

</ul> 
</div>

這意味着該列表現在是shopid的子元素，意味着mouseenter/mouseout不會干擾此元素，並且會按照您的要求執行此操作。

https://jsfiddle.net/kLte6zzk/1/

撥弄參考^

來源

2015-03-19 10:51:26

jQuery的鼠標離開衝突與另一個DIV

回答

相關問題