单击子菜单后在 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

代替visibility，你可以试试display属性。

Working Demo

jQuery

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

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

Answer 2

您可以通过 mouseup 事件来执行此操作，因为用户访问mouseup 的唯一时间是在他们单击链接之后。

$( '#header' ).mouseup(function() {
  //reset header
});

我想这正是你想要的，试试看：

$("#menu ul li").mouseup(function(){
    $("#menu ul").css('background-color','#ccc');
});