Question

我要做的是创建一个下拉链接，当点击链接时向下滑动，并根据点击的链接显示特定的隐藏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');
};

继承人：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处于淡入淡出的过程中时，问题是手动检查可见性。它可以为你做到这一切！

关于更短的代码：您需要一种方法将每个链接绑定到每个面板。现在，这些连接在脚本中是硬编码的，但假设您为链接指定了data-panel-id属性，其中包含相应面板的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');

};

如果我将mouseLeave（）转移到另一个特定的div，如何使用slideDp（）的slideLep（）触发slideDown（）来保持一个div？

1 个答案: