1

私はここで水平アコーディオンチュートリアルを作成する方法についてこのチュートリアルに従ってきました 。私はコードを調べて、彼が持っているものをほぼ正確に持っています。私の問題は私のcssだと思います。タブをクリックすると、最後のパネルがアニメーション化されますが、次のパネルがドロップダウンしてアニメーション化されません。誰かが私のcssまたはjqueryの何かの問題を教えてくれますか？これが私のjsFiddleです。何が問題なのか正確にはわかりませんが、すべての要素を左にフロートさせました。

PS'visible'変数は、現在のコンテンツパネルの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);
4

1 に答える 1

2

申し訳ありませんが、これをコメントするのに十分な評判がありません。

チュートリアルビデオのコメントにリンクされているソースコードとコードを比較しましたか？

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);
});
于 2013-03-27T01:06:43.443 に答える