点击清除CSS菜单hover状态（通过ajax加载的页面）
我在网站上有一个CSS下拉菜单。 在顶部有一个父类别列表，当您将鼠标hover在一个类别上时，会出现一个下拉菜单，您可以在其中单击其中一个子类别。
单击子类别时，将触发ajax页面加载并替换页面内容。 效果很好。
但问题是，因为页面没有重新加载，下拉菜单仍然存在。 你必须将鼠标移开才能让它消失。 这很烦人。 当您点击子类别时，我们希望菜单消失。 在触摸设备上，这种行为更令人讨厌。
我不会在这里发布代码，而是会链接到网站： http ： //tinyurl.com/blvtlwz有问题的菜单是顶部的 – “竞赛马”’休闲马’等。
我会对检测到点击时如何清除hover状态的任何想法感兴趣，或者更好的处理菜单的方法？ 我用jquery removeClass（）摆弄了，但我运气不好。
谢谢
您可以尝试使用此脚本：
$(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 }); }); 您可以使用.on而不是.click
// This might need some tweeking for it to work on your end $('#nav li').on("click", function(e){ $('#nav li').hide(); }); // When you are scrolled down a bit and click a top menu link (eg 'Competition Horses') you will "jump to top". This will prevent that. $('#nav ul li a').on("click", function(e){ e.preventDefault(); });
$(document).ready(function() { $('#nav li ul li').click(function() { $(this).parent().fadeOut(); return false; // comment this to allow propagaton to new page }); $('#nav li ul li').hover(function() { $(this).parent().fadeIn(); }); });
见演示