我有一个CSS下拉菜单的网站上。沿着顶部有父类别列表，当你超过一悬停，一个下拉菜单出现，可以再点击子类别之一。

I have a CSS drop down menu on a website. Along the top there are a list of parent categories, when you hover over one, a drop down menu appears where you can then click on one of the child categories.

当你点击子类别，一个AJAX页面加载被触发，页面的内容被替换。做工不错。

When you click on the child category, an ajax page load is triggered and the contents of the page are replaced. Works good.

但问题是，因为页面是不重装，在下拉菜单中仍然存在。你必须移动鼠标关闭它让它消失。这是烦人。我们需要的菜单，当你点击一个子类别dissapear。在触摸设备的这种行为就更烦了。

But the problem is, because the page is not reloaded, the drop down menu is still there. You have to move the mouse off it to get it to go away. This is annoying. We want the menu to dissapear when you click on a child category. On a touch device this behaviour is even more annoying.

而不是在这里张贴了code，我会放一个链接到网站： http://tinyurl.com / blvtlwz 有问题的菜单是一个在顶部 - 。竞赛马''休闲马等

Rather than posting the code here, I will put a link to the website: http://tinyurl.com/blvtlwz The menu in question is the one at the top - 'Competition Horses' 'Leisure Horses' etc.

我会很感兴趣的是如何清除点击时被检测到，或者处理菜单另一种选择更好的方式悬停状态的任何想法？我曾四处摆弄使用jQuery removeClass移除（），但我还没有多少运气。

I would be interested in any ideas of how to clear the hover state when a click is detected, or alternatively a better way of handling the menu? I have fiddled around with jquery removeClass(), but I haven't had much luck.

感谢

推荐答案

您可以使用此脚本尝试：

You can try with this script:

 $(function(){
   $('#nav li').hover(function() {
     $('ul',this).show(); // this will show the hidden ul
   });
  $('#nav li ul li').click(function() {
     $(this).parent().hide().end(); // this will hide the ul
  });
});