Javascript 如果我将mouseLeave（）切换到另一个特定的div，如何防止slideUp（）的slideDown（）div和mouseLeave（）触发器触发slideUp（）？

我试图做的是创建一个下拉列表，当单击链接时，它会向下滑动，并根据单击的链接显示一个特定的隐藏div。我希望它在单击另一个链接时，在暴露的下拉列表中优雅地在隐藏的div之间切换。我们已经大致了解了其中的第一部分。我想弄明白的是，当鼠标离开下拉菜单和菜单时，如何使下拉菜单在延迟后重新向上滑动，这样，如果您仍然在菜单或下拉菜单上滑动鼠标，而不仅仅是在下拉菜单或菜单上，它将保持打开状态。我在下面得到的几乎可以用。唯一缺少的是如何在返回菜单时保持下拉菜单打开。有什么建议吗

因此，我希望它的功能如下：

单击链接-

$（“div”）.slideDown（）

退出
$（“div”）
-
$（“div”）.slideUp（）

退出
$（“div”）
进入
$（“div-2”）
不
$（“div”）。slideUp（）

退出
$（“div-2”）
返回到
$（“div”）
不
$（“div”）.slideUp（）

退出
$（“div-2”）
-
$（“div”）.slideUp（）

以下是到目前为止我已经掌握的带有jQuery的javascript：

$('.dropdown-link > a').click(function() {
  var link = this;
  if ($(".navigation-dropdown").is(':hidden')) {
    $(".navigation-dropdown").slideDown(1000, 'swing', function() {
      switcher(link, $('#' + $(link).attr('data-panel-id')));
    });
  } else {
    switcher(this, $('#' + $(this).attr('data-panel-id')))
 };
  $(".navigation-dropdown").mouseleave(function(event) {
    $(".navigation-dropdown").slideUp(1000, 'swing');
    $(".active-item").removeClass('active-item');
  });
});

function switcher(link, panel) {
  $(".panel").stop().hide();
  $(".active-item").removeClass('active-item');
  $(panel).fadeIn(200);
  $(link).parent().addClass('active-item');
};

小提琴在这里：

以下是我到目前为止获得的更好概念的结果：
这个怎么样：

function switcher(link,panel){
    $(".panel").fadeOut(function() {
        $(".active-item").removeClass('active-item');
        $(panel).fadeIn(200);
        $(link).parent().addClass('active-item');
    });

};

这将淡出任何打开的面板，当它们消失时，淡入新面板并修改链接。问题是当jQuery正在淡入淡出时，手动检查可见性。它可以为你做这一切

关于较短的代码：您需要一种将每个链接绑定到每个面板的方法。现在，这些连接在脚本中是硬编码的，但是假设您为链接提供了带有相应面板id的
数据面板id
属性，则所有
。单击
处理程序可简化为：

$('.panel').click(function(){
     switcher(this,$('#' + $(this).attr('data-panel-id')))
});

编辑：使用
$（“.panel”）.stop（）
结束所有正在进行的动画。以下内容在JSFIDLE中对我有用：

function switcher(link,panel){
    $(".panel").stop().hide();
     $(".active-item").removeClass('active-item');
     $(panel).fadeIn(200);
     $(link).parent().addClass('active-item');

};

不，我之前在那个里，它只是产生了一系列连续的淡出和淡出，最终你们会看到一堆不同的面板，所有的东西都在到处弹跳。谢谢你！是的，这是一个更好的方法，至少我们不再在面板中反复寻找：可见。但它仍然需要点击两下才能做任何事情。一旦你点击两次，它就会像你想象的那样工作，但是你必须点击一个链接或链接组合两次。向上投票，感谢所有关于清理代码的帮助，并帮助我找到一种更有效的方法来隐藏暴露的面板！你的方法也解决了点击链接太快的问题！我很确定双击的问题是因为我试图在下拉菜单出现之前切换面板：visible yetI用上面的代码解决了双击问题，如小提琴上所示。我仍然不知道如何保持下拉菜单打开时，离开下拉菜单回到导航菜单。我已经更新了上面的jQuery代码以及fiddle以应用此修复程序