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。