2

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

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

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

与其在此处发布代码，我将放置一个指向该网站的链接：http ://tinyurl.com/blvtlwz 有问题的菜单是顶部的菜单-“竞赛马”“休闲马”等。

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

谢谢

4

3 回答 3

1

您可以使用 .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();
});
于 2012-12-28T12:07:50.550 回答
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
  });
});
于 2012-12-28T11:46:00.927 回答
0 
$(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(); 
 });
});​

See demo

于 2012-12-28T11:56:33.710 回答