javascript - 单击子菜单后在 CSS 菜单上强制鼠标离开

Question

如你所见http://www.revistatres.com.br/daniel/trecinco我有一个带有下拉子菜单的 CSS 菜单。

为了在点击后强制子菜单消失，我使用了以下内容:

    $("#menu ul li ul").click(function(){ 
        $(this).css("visibility", "hidden");    
    });     

为了让子菜单在菜单再次悬停时重新出现，我使用了以下内容:

    $("#menu ul li").hover(function(){
        $(this).children().css("visibility", "visible");    
    });

我现在的问题是，即使在子菜单消失后，顶部菜单仍保持“选中”状态，就好像 CSS 认为它仍在悬停一样，因此，在我移动鼠标指针之前，背景颜色仍然较暗。

在 $("#menu ul li ul").click 事件中，我尝试了这些选项来强制 CSS 意识到指针不再位于“#menu ul li”上方:

            $("#menu ul li").trigger("mouseleave");

            $("#menu ul li").css("removeClass","hover");

还有很多其他的东西，但都没有用。

有什么想法吗？

谢谢。

Answer 1

您可以尝试使用 display 属性代替 visibility。

Working Demo

jQuery

 $("#menu ul li").hover(function(){
        $(this).children().css("display", "block");    
    });

$("#menu ul li ul").click(function(){ 
        $(this).css("display", "none");    
    });