Jquery 多个div的SlideUp SlideDown排序

我想滑动切换多个div，就像这把小提琴一样：

这个脚本的功能很好，但我需要在下一个内容按顺序向下滑动之前将隐藏内容向上滑动

此外，当您在活动div链接打开时单击该链接时，它将导致该链接滑动并隐藏，就像站点菜单一样

以下是HTML:

  <style>.targetDiv {display: none}</style>

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

---

您需要从先前动画的完成功能触发连续动画。这将允许您启动一个，当它完成时，启动下一个，当它完成时，启动下一个，依此类推

我不清楚你到底希望这种行为如何运作。如果您能更好地解释这一点，我可以提供一个代码示例

猜猜你想要什么，举个例子：

jQuery(function(){
   jQuery('.showSingle').click(function(){
       // get visible targetDivs
       var vis = jQuery('.targetDiv:visible');

       // get the item we're supposed to show from an attribute on what was clicked
       var targetItem = $(this).attr('target');

       // make jQuery object for target
       var target = jQuery('#div' + targetItem);

       // assume we want to slideDown
       var fn = function() {
           target.slideDown();
       };
       // if there are some visible,then we will get a completion function
       // and should hide visible items
       if (vis.length) {
           if (vis[0].id == "div" + targetItem) {
               // if clicking on the one that's already shown, 
               //    nothing to show on completion
               fn = function() {};
           }
           vis.slideUp(fn);
       } else {
           // otherwise, just show the selected one (none to hide)
          target.slideDown();
       }
   });
});

---

工作演示：

这里有一个解决方案，当没有显示任何内容或单击与当前显示的元素关联的div时，它使用一个

活动的

类来创建适当的功能

jQuery(function($){
$('.showSingle').click(function(){
    var itemid = '#div'+$(this).attr('target'); //id of the element to show/hide.

    //Show the element if nothing is shown.
    if($('.active').length === 0){
        $(itemid).slideDown();
        $(itemid).addClass('active');

    //Hide the element if it is shown.
    } else if (itemid == "#"+$('.active').attr('id')) {
        $('.active').slideUp();
        $(itemid).removeClass('active');

    //Otherwise, switch out the current element for the next one sequentially.
    }else {
        $('.active').slideUp(function(){
            $(this).removeClass('active');
            if ($(".targetDiv:animated").length === 0){
                $(itemid).slideDown();
                $(itemid).addClass('active');
            }
        });
    }
});
});

看

编辑

---

如果页面上的其他内容已经在使用

活动的

类，则此操作将中断。请使用不同的类名或更精确的选择器。

谢谢Fallexe，由于某些原因，JSFIDLE对我不起作用。最后一件事，您知道是否可以为转换添加轻松效果吗？好的，太好了。。。对不起，这是我最不想问的问题。您知道如何将类添加到活动链接（打开的链接）中吗？说真的……最后。。问题I：我承诺将

$（'.showsingSingle'）.addClass（'classname'）

放在应该添加类的位置（第一个和第三个if/else块的开头）和

$（this）。removeClass（'classname'）

放在click回调的开头。很抱歉，我的评论有一些（更正的）错误，但是签出应该是您想要的。如果快速单击div，则会同时显示多个元素。这可能是问题，也可能不是问题，取决于动画速度。是。。我没有注意到。你知道如何解决这个问题吗？@user2441150-这里有一个版本试图防止快速的多次点击：

jQuery(function($){
$('.showSingle').click(function(){
    var itemid = '#div'+$(this).attr('target'); //id of the element to show/hide.

    //Show the element if nothing is shown.
    if($('.active').length === 0){
        $(itemid).slideDown();
        $(itemid).addClass('active');

    //Hide the element if it is shown.
    } else if (itemid == "#"+$('.active').attr('id')) {
        $('.active').slideUp();
        $(itemid).removeClass('active');

    //Otherwise, switch out the current element for the next one sequentially.
    }else {
        $('.active').slideUp(function(){
            $(this).removeClass('active');
            if ($(".targetDiv:animated").length === 0){
                $(itemid).slideDown();
                $(itemid).addClass('active');
            }
        });
    }
});
});