水平手風琴教程css問題我認爲

Question

我一直在關注如何製作水平手風琴本教程tutorial here 我已經經歷了代碼，幾乎完全是他所擁有的。我想我的問題是我的CSS，當你點擊一個標籤最後一個面板動畫，但下一個面板下降，並沒有動畫可以有人告訴我最新錯誤，無論是我的CSS或jQuery中的東西你能給我一些幫助請在這裏是我的jsFiddle。我不知道到底是什麼問題，但我將所有元素都放在左邊。

PS的 '可見的' 變量是當前內容面板 HTML：

<div class="accordion" data-style="horizontal">   
    <h3 class="header" id="tab1"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab2"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab3"></h3> 
    <div class="content">Content</div> 
    <h3 class="header" id="tab4"></h3> 
    <div class="content">Content</div> 
</div> 

CSS

.accordion { 
    width:460px; height:300px 
} 
.accordion .header { 
    width:40px; height:100% 
} 
.accordion .content{ 
     background:#dedede; height:100% 
} 
.accordion .header, accordion .content { 
    float:left; height:100%; clear:none 
} 
#tab1 { 
    background:#C90 
} 
#tab2 { 
    background:#C60 
}  
#tab3 { 
    background:#C30 
} 
#tab4 { 
    background:#C00 
} 

的jQuery：

function accordion(rate) { 
    var tab = $('.accordion').find('h3'),   
     visible = tab.next().filter(':last'), 
     width = visible.outerWidth(); 

    tab.next().filter(':not(:last)').css({'display':'none', 'width':0}); 

    tab.click(function() { 
     if(visible.prev()[0] == this) { 
      return; 
     } 
     visible.animate({width: 0}, {duration:rate}); 
     visible = $(this).next().animate({'width':width}, {duration:rate}); 
    }); 
} 

accordion(350); 

Answer 1

對不起，我沒有足夠的聲譽這是一個評論。

您是否將您的代碼與教程視頻的評論中鏈接的源代碼進行了比較？

http://codecompendium.com/archives/downloads/

有一些顯著的差異。你原來發布的jquery與你的jsFiddle不同。

你的Jquery應該更像：

function accordion(rate) { 
var tab = $('.accordion').find('.header'),   
    visible = tab.next().filter(':last'), 
    width = visible.outerWidth(); 

tab.next().filter(':not(:last)').css({'display':'none', 'width':0}); 

tab.click(function() { 
    if(visible.prev()[0] == this) { 
     return; 
    } 
    visible.animate({width:0}, {duration:rate}); 
    visible = $(this).next().animate({width:width}, {duration:rate}); 
}); 
}; 

$(document).ready(function(){ 
    accordion(350); 
});