SlideToggle在第一个和最后一个div之间切换

Question

我一直在使用jquery创建一些标签。这是我的基本代码。

JSFiddle

我想设置这样的标签内容的初始打开是的slideToggle但随后标签之间移动是一个标准的切换，然后当用户单击该项目，关闭项目我希望它的slideToggle再次。举例来说。

打开标签1 - 的slideToggle，移动到标签2 - 切换，移动到选项卡3 - 切换，移动到标签2 - 切换，关闭标签2 - 的slideToggle

这是可能的，如果是的话我怎么能实现这个。我试图谷歌这一点，但我似乎无法找到答案。

在此先感谢您的帮助。

HTML

<div class="tab">Tab 1</div> 
<div class="tab">Tab 2</div> 
<div class="tab">Tab 3</div> 

<div class="lrgWork"> Tab Content 1</div> 
<div class="lrgWork"> Tab Content 2</div> 
<div class="lrgWork"> Tab Content 3</div> 

JS

$('.tab').click(function() { 
     var index = $(this).index(); 
     $('.lrgWork').eq(index).slideToggle().siblings('.lrgWork').hide(); 
    }); 

Answer 1

如何

var currentTabOpen=0;//keeps track of what tab is open 
var tabOpen=false;//keeps track of whether a tab is opened 
$('.tab').click(function() { 
    var index=$(this).index(); 
    if(currentTabOpen==index||!tabOpen){//if we're either closing a tab, or opening one, 
     $('.lrgWork').eq(index).slideToggle();//use the slide animation 
     tabOpen=!tabOpen;//and now the tab is open if it was closed and vice versa 
    } 
    currentTabOpen=index;//make sure we're keeping track of the opened tab 
    $('.lrgWork').eq(index).show().siblings('.lrgWork').hide();//don't use the animation 
}); 

，看到这里的工作JSFiddle。