Question

我创建了一个超级简单的手风琴，我使用h3 / p设置，而p最初有max-height: 0，但如果是h3有一个.open类，p类似于max-height: 100px（h3.open + p {max-height: 100px}）。

然后我使用几行jQuery将open类添加到点击的h3。

我遇到的问题是，当我点击标题时，它首先滑出，然后半秒后另一个向后滑动。为什么转换不是在同一时间执行？

这是一个小提琴：http://jsfiddle.net/2uhVY/

以下是所有代码：

HTML

<div class="accordion">
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
</div>

CSS

.accordion {

}

.accordion h3 {
    margin: 0;
    cursor: pointer;
}

.accordion p {
    margin: 20px 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}

.accordion h3.open + p {
    max-height: 100px;
}

JS（jQuery）

$(function () {
    var h3s = $('.accordion h3');

    h3s.click(function () {
        h3s.removeClass('open');
        $(this).addClass('open');
    });
});

Answer 1

max-height正在从100px过渡到0。你的元素并不高，所以它们的高度实际上并没有开始改变，直到过渡结束。

CSS转换不是同时执行

1 个答案: