javascript - 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”是父元素)，该元素隐藏但在鼠标悬停在其父元素上时不会再次出现。 (因为 li:hover ul css 规则已经改变)。

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

Answer 1

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

使用类代替 hover: 伪类:

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

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

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

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