jquery在下拉菜单和ajax窗口之间冲突 [英] jquery conflict between dropdown menu and ajax window

问题描述

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

尝试它，源代码在这里：

  codepen.io / riogrande / pen / NxZLaQ 
  

逐步复制：

1. 鼠标悬停在最右边，Lorem和下拉菜单出现。




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




3. 点击X退出ajax popover




4. 步骤1不再有效。

解决方案

p>您可以使用单独的 fadeIn 和 fadeOut 函数，而不是单个 fadeToggle 悬停，它会解决问题：

  $（。menu-dropdown）。hover（
 function（e）{
 if（$（window）.width（）> 943）{
 $（this）.children（ul）。stop（true，false） fadeIn（150）; 
 e.preventDefault（）; 
} 
}，
函数（e）{
 if（$（window）.width ; 943）{
 $（thi 。S）。儿童（ UL）停止（TRUE，FALSE）.fadeOut（150）; 
 e.preventDefault（）; 
} 
} 
）; 
  

CodePen 这里。

I have a jquery dropdown menu and an modal window which is a trigger for ajax. The problem occurs when you click on link for ajax, and when you close it dropdowns are not working anymore. So dropdown is working when you dont click the ajax. When you click the link and close it, dropdown menu is not showing dropdown.

Try it and source code are here:

codepen.io/riogrande/pen/NxZLaQ

Step by step to reproduce:

1. Mouse over the right most "Lorem" and a drop down menu appears.

2. Exit the mouseover and click the link titled "Click here for ajax"

3. Click the "X" to exit the ajax popover

4. Step 1 no longer works.

解决方案

You can use separate fadeIn and fadeOut functions instead of a single fadeToggle on hover and it will fix the issue:

$(".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.

这篇关于jquery在下拉菜单和ajax窗口之间冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！