下拉菜单和ajax窗口之间的jquery冲突

Question

我有一个jQuery下拉菜单和一个模态窗口，它是ajax的触发器。当您单击ajax的链接时，就会出现问题，当您关闭它时，下拉列表将不再起作用。因此，当您不单击ajax时，下拉列表将起作用。单击链接并将其关闭时，下拉菜单未显示下拉菜单。

试试看，源代码在这里：

codepen.io/riogrande/pen/NxZLaQ

逐步重现：

1. 将鼠标悬停在最右边的“ Lorem”上，然后会出现一个下拉菜单。

2. 退出鼠标悬停，然后单击标题为“单击此处获取ajax”的链接

3. 点击“ X”退出ajax弹出窗口

4. 步骤1不再起作用。

Answer 1

您可以在鼠标悬停时使用单独的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 在这里。