的CSS下拉菜單和JavaScript

Question

我有用於下拉菜單此HTML結構：

<ul> 
    <li><ul>...</ul></li> 
    <li>...</li> 
</ul> 

和CSS：

li ul {display : none;} 
li:hover ul {display : block;} 

（這只是基礎結構）。

當我從菜單中選擇一個項目時，我正在用ajax加載一些東西，我想關閉打開的子菜單。

我試過用jQuery來隱藏單擊元素的父（「li」是單擊的元素和「ul」是父），元素隱藏，但它不會再出現在它的父級上的mouseover。 （因爲li：hover ul css規則已更改）。

任何關於我如何處理這種情況的提示？

Answer 1

所以如果你畢竟使用JavaScript，你可以做以下更改CSS：

li.hover ul {display : block;} 

和JavaScript：

$("ul li").hover(function(){ 
    $(this).addClass("hover"); 
}, function(){ 
    $(this).removeClass("hover"); 
}); 

Answer 2

解決的最佳方式，這是通過使用Javascript來創建懸停效果而不是CSS。這樣您就可以隨時隱藏元素。

所以，相反的li:hover ul {display : block;}，使用：

$('li').each(function(){ 
    $(this).bind('mouseover',function(){ 
     $(this).find('ul').show(); 
    }); 
    $(this).bind('mouseout',function(){ 
     $(this).find('ul').hide(); 
    }); 
}); 

Answer 3

，它不工作的原因是，你通過設置這個元素本身的風格隱藏元素，並具有比作風更高的優先級片。

使用類，而不是hover:僞類：

li ul {display : none;} 
li.active ul {display : block;} 

設置元素的類時，您將鼠標懸停在子菜單：

$('ul li').hover(function() { 
    $(this).addClass('active'); 
}, function() { 
    $(this).removeClass('active'); 
}); 

現在你可以從元素刪除類只要你想要，它不會搞砸懸停。

Answer 4

嘗試，我創建了幾個小時前那個菜單：

http://jsfiddle.net/aL7Xe/40/