javascript - 如果我将 mouseLeave() 转移到另一个特定的 div，如何防止带有 sliderDown() 的 div 和带有 mouseLeave() 触发器的 SlideUp() 触发？

Question

我想要做的是创建一个下拉列表，当单击链接时该下拉列表会向下滑动，并根据单击的链接显示特定的隐藏 div。我希望它在单击另一个链接时在公开的下拉列表中的隐藏 div 之间优雅地切换。我们已经基本弄清楚了第一部分。我想弄清楚的是，当鼠标离开下拉菜单和菜单时，如何使下拉菜单在延迟后重新滑回，这样，如果您的鼠标仍然在菜单或下拉菜单上，而不仅仅是下拉菜单或菜单上，它就会保持打开状态。菜单。我下面的内容几乎可以工作。唯一缺少的是如何在返回菜单时保持下拉菜单打开。有什么建议吗？

所以我希望它的功能如下:

点击链接 - $("div").slideDown();

退出$("div") - $("div").slideUp();

退出 $("div") 进入 $("div-2") 不要 $("div").slideUp();

退出 $("div-2") 返回 $("div") 不要 $("div").slideUp() ;

退出$("div-2") - $("div").slideUp();

这是我迄今为止得到的带有 jQ​​uery 的 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');
};

这是 fiddle :https://jsfiddle.net/OGZStudios/qdp42cph/9/

这是我迄今为止获得的更好概念的结果:http://woodlandbible.tk

Answer 1

这个怎么样:

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

};

这应该淡出所有打开的面板，当它们消失时，淡入新面板并修改您的链接。问题是当 jQuery 淡入淡出时手动检查可见性。它可以为您完成这一切!

关于较短的代码:您需要一种将每个链接绑定(bind)到每个面板的方法。现在，这些连接已硬编码在脚本中，但假设您为链接提供了带有相应面板 ID 的 data-panel-id 属性，您所有的 .click处理程序减少为:

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

编辑:使用 $(".panel").stop() 结束所有正在进行的动画。以下内容在 JSFiddle 中对我有用:

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

};