小编典典

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

ajax

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

试试看,源代码在这里:

codepen.io/riogrande/pen/NxZLaQ

逐步重现:

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

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

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

  4. 步骤1不再起作用。


阅读 261

收藏
2020-07-26

共1个答案

小编典典

您可以在鼠标悬停时使用单独的fadeInfadeOut函数而不是单个函数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 在这里

2020-07-26