我有一个jQuery下拉菜单和一个模态窗口,它是ajax的触发器。当您单击ajax的链接时,就会出现问题,当您关闭它时,下拉列表将不再起作用。因此,当您不单击ajax时,下拉列表将起作用。单击链接并将其关闭时,下拉菜单未显示下拉菜单。
试试看,源代码在这里:
codepen.io/riogrande/pen/NxZLaQ
逐步重现:
将鼠标悬停在最右边的“ Lorem”上,然后会出现一个下拉菜单。
退出鼠标悬停,然后单击标题为“单击此处获取ajax”的链接
点击“ X”退出ajax弹出窗口
步骤1不再起作用。
您可以在鼠标悬停时使用单独的fadeIn和fadeOut函数而不是单个函数fadeToggle,它将解决此问题:
fadeIn
fadeOut
fadeToggle
$(".menu-dropdown").hover( function(e) { if ($(window).width() > 943) { $(this).children("ul").stop(true,false).fadeIn(150); e.preventDefault(); } }, function(e) { if ($(window).width() > 943) { $(this).children("ul").stop(true,false).fadeOut(150); e.preventDefault(); } } );
CodePen 在这里。