Javascript 单击子菜单后在CSS菜单上强制删除鼠标

正如你在这里看到的，我有一个带有下拉子菜单的CSS菜单

为了强制子菜单在单击后消失，我使用了以下方法：

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

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

为了在菜单再次悬停时重新显示子菜单，我使用了以下方法：

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

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

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

在$（“#menu ul li”）.click事件中，我尝试了以下选项，以迫使CSS意识到指针不再位于“#menu ul li”上方：

还有很多其他的东西，但都不管用

有什么想法吗

---

谢谢。

您可以通过mouseup事件来实现这一点，因为用户只有在单击链接后才能进入

mouseup

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

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

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

---

您可以尝试

显示属性，而不是
可见性


jQuery

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

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

您的链接没有打开，请为您的问题修改一下。有一个额外的“w”，刚刚修复，谢谢。@BuddhistBeast Chrome。我刚刚在IE上试过，同样的情况也发生了。更具体地说，在mobile safari tho和iPad上确实发生过。这些问题需要一把小提琴。所谓“重置标题”是指重新加载div“标题”的内容吗？如果是这样，我一直在使用jquery的.load来避免在用户单击链接时重新加载整个页面。通过这种方式，我只需加载一次#页眉和#页脚，我知道每次单击时重新加载#页眉可以解决问题，但这会破坏使用的目的。按我的方式加载。对不起，如果我误解了你，如果我误解了，请你再解释一下好吗？谢谢，不用了，只要把用户悬停时所做的任何更改都颠倒过来就行了。例如，如果鼠标悬停时，菜单选项的背景色从#ccc更改为#999，则在鼠标悬停功能中，将背景色从#999更改为#ccc。检查更新的第二个代码块。我不确定目前的两个答案中哪一个是你问题的解决方案，但我肯定接受苏吉特的建议。使用“显示”比“可见性”更常见。我现在明白你的意思了，我已经在“单击”事件中尝试过将其反转，这应该基本相同。然而，我遇到了另一个问题，应该很简单。最初，“菜单ulli”没有背景设置，因为当它悬停时有#菜单ulli:hover{background:#555；color:#fff；}我尝试了css（“背景”，“蓝色”）；标题的背景确实变为蓝色，但是如何删除背景呢？我试过css（“背景”和“）；但它不起作用。这起作用了，谢谢！我应该意识到我应该使用display，因为子菜单在悬停标题时使用display显示。非常感谢你！我试着投票，但我不能，我正在寻找一种方法来标记这个问题的解决，我如何标记这个问题的答案请？我真的很抱歉问这个。。。