0

私はアコーディオン リストを作成しています。CSS -webkit-transition:. アニメーションは、単に .open クラスのオンとオフを切り替えるイベント ハンドラーによってトリガーされます。問題は、クリックすると、アニメーションが閉じた高さから 0px の高さに移動し、滑らかにフルハイトにアニメーション化するのではなく、フルハイトに戻ることです。

HTML

<ul class="accordion">
    <li>Foo
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p>
    </li>
    <li class="open">Baz
        <p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p>
    </li>
    <li>Bar
        <p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p>
    </li>
</ul>​

Javascript

$('.accordion').delegate('li', 'click', function(li){
    $(this).toggleClass('open');
});

CSS

.accordion li.open{
    -webkit-transition: height 1s;
}

.accordion li:not(.open){
    height: 1em;
    -webkit-transition: height 1s;
}
​

JSFiddle で試してみて、私の言いたいことを理解してください。

機能させる方法はすでにわかっていますが、.open クラスに明示的な高さを設定する必要があります。ただし、アコーディオンの高さは可変であり、それぞれに明示的なセレクターを作成するのは邪魔で保守できません。誰かがこれよりも良い解決策を教えてくれますか?

ここでは、コンテンツに合わない明示的な高さで作業しています

4

2 に答える 2

0

W3C 仕様では、この種の動作は提供されていないようです (このコメントとこの電子メール スレッドに基づく)。これが仕様に含まれていない理由はわかりませんが、これを回避する唯一の方法は、javascript (または高さを決定する他の方法) を使用してその場でオブジェクトの高さを測定する必要があるようです。同様の質問に対するこの回答が役立つ場合があります。

于 2012-12-02T05:43:16.810 に答える
0

heightに置き換え、をautomax-heightのままにして、 open を必要以上に大きなものに設定することで、これを (ほんの少しハック的な方法で) 処理することができます。(200px、500pxなど)heightmin-height

max-height:0明らかに閉じます。

max-height:500pxアニメーションで開きますが、最大の高さまでアニメーション化されるため、完全ではありません。そのため、要素の高さが実際に 200px しかない場合、ほとんどのアニメーションを見逃してしまいます。

于 2013-04-24T20:40:38.610 に答える