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

Question

我有一个jquery下拉菜单和一个模式窗口，它是ajax的触发器。单击链接以获取ajax时会出现此问题，当您关闭它时，下拉列表不再起作用。因此，当您不单击ajax时，下拉列表正在工作。当您单击该链接并关闭它时，下拉菜单不会显示下拉列表。

尝试一下，源代码在这里：

codepen.io/riogrande/pen/NxZLaQ

逐步重现：

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

2. 退出鼠标悬停，然后点击标题为“点击此处查看ajax”的链接

3. 点击“X”退出ajax popover

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 here。