多个 div 的 SlideUp SlideDown 排序

Question

我想像在这个小提琴中那样滑动切换多个 div：

http://jsfiddle.net/jakecigar/XwN2L/2154/

这个脚本的功能不错，但是我需要隐藏的内容在之前依次往下滑动。

此外，当您在打开时单击活动 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(){
      jQuery('.targetDiv').slideUp();
      jQuery('.targetDiv').hide();
      jQuery('#div'+$(this).attr('target')).slideToggle();
   });
});

Answer 1

这是一个解决方案，它使用active 类在没有显示任何内容或单击与当前显示的元素关联的 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');
            }
        });
    }
});
});

见http://jsfiddle.net/m6aRW/1/

编辑
如果您页面上的其他内容已经在使用 active 类，这将中断。使用不同的类名或更精确的选择器。

Answer 2

您需要从早期动画的完成功能触发连续的动画。这会让你开始一个，当它完成时，开始下一个，当它完成时，开始下一个，依此类推。

我不清楚您希望该行为如何工作。如果你能解释得更好，我可以提供一个代码示例。

猜测你想要什么，这里有一个例子：

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();
       }
   });
});

工作演示：http://jsfiddle.net/jfriend00/fd4Nn/