SlideUp用于多个div的SlideDown排序

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

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

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

此外，当您在打开时单击活动div链接时，它将使其滑动并隐藏，因为这是用于站点菜单。

这是HTML：

.targetDiv {display: none} Div 1 Div 2 Div 3 Div 4 
Lorum Ipsum1
 
Lorum Ipsum2
 
Lorum Ipsum3
 
Lorum Ipsum4 

这是脚本：

 jQuery(function(){ jQuery('.showSingle').click(function(){ jQuery('.targetDiv').slideUp(); jQuery('.targetDiv').hide(); jQuery('#div'+$(this).attr('target')).slideToggle(); }); }); 

Answer 1

这是一个解决方案，当没有显示任何内容或单击与当前显示的元素关联的div时，使用active类创建适当的function。

 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

您需要从早期动画的完成function触发连续动画。 这将让你开始一个，当它完成，开始下一个，当它完成，开始下一个，如此。

我不清楚你想要的行为如何运作。 如果你能更好地解释一下，我可以提供一个代码示例。

猜猜你想要什么，这是一个例子：

 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/