效果基本show了slideDown測序多個div

Question

我想的slideToggle多個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/