的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/