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');
});

单击子菜单后，在CSS菜单上强制鼠标移动

2 个答案: