Question

我一直在关注如何制作水平手风琴tutorial here的教程我已经完成了代码并且几乎完全拥有了他所拥有的东西。我认为我的问题是我的问题，当你点击一个标签时，最后一个面板动画但是下一个面板下降并且没有动画可以有人告诉我什么是错的要么我的css还是jquery中的东西你能给我一些帮助吗请在这里是我的jsFiddle 。我不知道究竟是什么问题，但我把所有元素都放到了左边。

P.S“可见”变量是当前内容面板 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);
});

水平手风琴教程css问题我认为

1 个答案: