单击时清除 CSS 菜单悬停状态（通过 ajax 加载的页面）

Posted 2023-05-08

【中文标题】单击时清除 CSS 菜单悬停状态（通过 ajax 加载的页面）

【英文标题】：Clear CSS menu hover state on click (page loaded via ajax)

【发布时间】：2012-12-13 16:12:30

【问题描述】：

我在网站上有一个 CSS 下拉菜单。顶部有一个父类别列表，当您将鼠标悬停在一个上时，会出现一个下拉菜单，您可以在其中单击其中一个子类别。

当您单击子类别时，会触发 ajax 页面加载并替换页面内容。效果很好。

但问题是，因为页面没有重新加载，下拉菜单还在。您必须将鼠标移开才能使其消失。这很烦人。当您单击子类别时，我们希望菜单消失。在触控设备上，这种行为更令人讨厌。

这里不贴代码，我放个网址链接：http://tinyurl.com/blvtlwz 有问题的菜单是顶部的菜单-“竞赛马”“休闲马”等。

我对如何在检测到点击时清除悬停状态或处理菜单的更好方法感兴趣？我一直在摆弄 jquery removeClass()，但运气不佳。

谢谢

【参考方案1】：

你可以试试这个脚本：

 $(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
  );
);

【讨论】：

这是一种享受，我还没有完全测试它，但到目前为止它看起来不错:) 非常感谢

【参考方案2】：

您可以使用 .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();
);

【讨论】：

我喜欢防止跳回顶部的第二段 - 谢谢！

【参考方案3】：

$(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(); 
 );
);​

见demo

【讨论】：

谢谢，我试了一下，但是一旦我点击了菜单，一旦它被删除，就无法再次点击了。