1

我一直在关注这个关于如何制作水平手风琴教程的教程， 我已经浏览了代码并且几乎完全拥有他所拥有的。我认为我的问题是我的 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);
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 回答