jQuery子菜單顯示隱藏div，但當我將鼠標懸停時消失

我試圖構建jQuery子菜單下拉菜單。jQuery子菜單顯示隱藏div，但當我將鼠標懸停時消失

我的代碼工作正常，如果我懸停菜單鏈接按鈕，進入子菜單並退出。

但是，如果我懸停菜單鏈接按鈕，然後另一個菜單按鈕，子菜單永遠不會消失。

我想它......

顯示的子菜單中，當你將鼠標懸停在鏈接按鈕。
繼續顯示活動按鈕鏈接和子菜單，同時將鼠標懸停在任意一個上。
當您退出按鈕或子菜單（但不是當您退出子菜單以進入活動按鈕時），關閉活動菜單按鈕和子菜單。

我希望有道理！

這裏是我的HTML：

<ul class="mainmenu"> 
    <li><a href="">normal</a></li> 
    <li class="menudrop"><a href="">dropdown</a></li> 
</ul> 

<div class="submenu"> 
    <h3>Aliquam id libero</h3> 
    <ul> 
     <li><a href="">Vestibulum in purus</a></li> 
     <li><a href="">Lectus id vestibulum</a></li> 
     <li><a href="">Suspendisse posuere</a></li> 
     <li><a href="">Nam ut bibendum</a></li>         
    </ul> 
</div>

這裏是我使用jQuery：

$(function() { 
$(".menudrop").hover(
    function() { 
     $(".submenu").show(); 
    }  
);   
$(".submenu").hover(
    function() { 
     $(".menudrop").addClass("active"); 
     $(".submenu").show(); 
    }, 
    function() { 
     $(".menudrop").removeClass("active"); 
     $(".submenu").hide(); 
    } 
);   
});

而且，我最初設置子菜單中顯示沒有在CSS。

.submenu { 
position: absolute; 
z-index: 2000; 
width: 970px; 
display: none; 
}

來源

2012-07-02 ExodusCheese

當你懸停它激活子菜單中.menudrop，但離開它不會禁止子菜單，所以你可以去正常，已打開的菜單

。

當你懸停它變得活躍，並隱藏在休假，但如果你試圖去正規的.menudrop再次顯示它

，你可以把它理解更好，如果你添加CSS

.mainmenu麗子菜單{display：inline}

更好地將子菜單放在.menudrop中，並使用菜單拖放來顯示/隱藏.hover進入/離開。最終你最終會使用一些額外的div來進行格式化。

看到小提琴這裏：http://jsfiddle.net/m2Gfe/2/

仍然有從.menudrop菜單的時候鼠標轉變之間的干擾，以.submenu他們可能隱藏子菜單，而是可以通過填充來解決和重疊位

來源

2012-07-02 23:52:11

謝謝您！你的回答和插圖幫助我意識到，我所做的是通過嵌套子元素來實現的。內聯插圖絕對有幫助。 – ExodusCheese

jQuery子菜單顯示隱藏div，但當我將鼠標懸停時消失

回答

相關問題