Question

我前段时间制作了一部完美的手风琴，但现在我需要它，以便在页面加载时它的第一部分就出来了。我不确定如何做到这一点..我已经尝试将第一个内容块的显示和可见性设置分别更改为阻止/显示，但我认为我不太了解该幻灯片，以便自己实际修改它，而文档让我有点困惑......

有人能指出我正确的方向吗？

$('#e1-2 .accord-header').click(function () {
    if ($(this).next('div').is(':visible')) {
        $(this).next('div').slideUp(300);
    } else {
        $('#e1-2 .accord-content').slideUp(300);
        $(this).next('div').slideToggle(300);
    }
});

我的jquery和here's a fiddle代码。

非常感谢任何帮助！谢谢！

Answer 1

怎么样：

$('.accord-header').first().next('div').show()

Updated Fiddle

Answer 2

简单的CSS救援（http://jsfiddle.net/KdfBj/2/）：

/* Create an active class at the end of the declarations */
...
.accord-content.active {
    display: block;
}

<!-- Add that class to the desired .accord-content -->
<div class="accord-header">header1</div>
<div class="accord-content active">
    <div>test1</div>
    <div>test2</div>
</div>

Answer 3

你可以采用这两种方式......

1）初始状态

我很少在元素上允许内联样式，但由于大多数jQuery动画都使用display属性来确定可见性，因此在页面加载时要在显示时打开的元素上添加style =“display：block”是有意义的。 / p>

<div class="accord-content" style="display:block;">

2）加载时

如果你想在你的标记之外保留内联样式，或者只是希望它在页面加载后进行动画处理，你可以添加一个jQuery块以在加载时打开那个手风琴面板...

$(function(){
    $('.accord-content').first().slideDown(300);
});

我建议你这样做是为了给整个手风琴添加一个包含元素（比如.accordion），让你的选择器更明确（比如$（'。accordion .accord-content'））

如何制作手风琴的第一部分直到页面加载关闭？

3 个答案: