懸停子菜單

Question

在我的大項目中，我遇到了問題。代碼太大，無法完整發布，但我在jsfiddle上創建了一個示例。

我有一個子菜單部分的動態菜單。

我想懸停某些菜單項以顯示某個盒子容器。

問題是當鼠標懸停在菜單項上我無法訪問盒子容器時，因爲它不在<li>元素內，因爲它是動態加載的。

我有想法創建函數，懸停在菜單項上顯示框容器，並檢查何時鼠標的菜單項和框容器隱藏框容器。

這將是我的問題的解決方案，我試過mouseout和mouseleave，但沒有工作。

JSFiddle

$('.first-menu-item, .submenu').hover(function() { 
 
    $('.submenu').toggle(); 
 
});

.menu li { 
 
    display: inline-block; 
 
} 
 

 
.submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="first-menu-item">FIRST MENU</li> 
 
    <li>SECOND MENU</li> 
 
    <li>THIRD MENU</li> 
 
</ul> 
 

 

 
<div class="submenu"> 
 
    SUBMENU 
 
</div>

Answer 1

速戰速決是添加在子菜單中徘徊時，對於相同的邏輯：

$('.first-menu-item, .submenu').hover(function(){ 
    $('.submenu').toggle(); 
}); 

但也有實現的子菜單更好的方法在列表式導航中（例如here）。然而，用你的解決方案，這是我會做的。

Fiddle

但同樣，你應該重新考慮你的子菜單中執行。例如參見羅裏的建議。