css下拉菜单和javascript答案

【问题标题】：css dropdown menu and javascriptcss下拉菜单和javascript
【发布时间】：2012-03-06 23:32:48
【问题描述】：

我有这个用于下拉菜单的 html 结构：

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

和css：

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

（这只是基础结构）。

当我从菜单中选择一个项目时，我正在使用 ajax 加载一些内容，我想关闭打开的子菜单。

我尝试使用 jquery 隐藏被点击元素的父元素（“li”是被点击元素，“ul”是父元素），元素隐藏但它不会在鼠标悬停在其父元素上再次出现。（因为 li:hover ul css 规则已经改变）。

对我如何处理这种情况有什么建议吗？

【问题讨论】：

标签： javascript jquery css drop-down-menu

【解决方案1】：

它不起作用的原因是您通过在元素本身上设置样式来隐藏元素，并且比样式表具有更高的优先级。

使用类而不是 hover: 伪类：

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

悬停子菜单时在元素上设置类：

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

现在您可以随时从元素中删除类，并且不会搞砸悬停。

【讨论】：

【解决方案2】：

因此，如果您毕竟使用的是 javascript，则可以对 css 进行以下更改：

li.hover ul {display : block;}

和javascript：

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

【讨论】：

【解决方案3】：

解决此问题的最佳方法是使用 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();
   });
});

【讨论】：

【解决方案4】：

试试我几分钟前创建的菜单：

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

【讨论】：