Question

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

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

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

我不会在此处发布代码，而是会在网站上添加一个链接：http://tinyurl.com/blvtlwz 有问题的菜单位于顶部 - “竞赛马”，“休闲马”等。

我会对检测到点击时如何清除悬停状态的任何想法感兴趣，或者更好的处理菜单的方法？我用jquery removeClass（）摆弄了，但我运气不好。

由于

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

Answer 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();
});

Answer 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

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

3 个答案: