0

jQueryとCSS（そして明らかにHTML）を使用して、展開/折りたたみ効果のあるメニューを作成しました

トリックでトランジションにCSSを使用してmax-heightいます（現時点でCSSでできることは本当に素晴らしいです）

いずれにせよ、親メニュー項目をクリックすると、展開してその子が表示され、同時に他の展開されたリストが閉じられます。これは完全に機能しますが、ジャンプ効果が発生し、その下の要素がシフトします。

これを特にうまく説明しているかどうかわからないので、私が使用しているコードのこのフィドルを参照してください（ここにコードを貼り付けますが、かなりたくさんあります）

ここで明らかな何かが欠けていますか？展開/折りたたみ時に下の要素を微調整しないように CSS を操作する方法はありますか? それとも、この効果を達成するためにあきらめて jQuery を使用する必要がありますか?

編集:達成したいことが明確でない場合は、ここの右側のメニューを参照してください。最初の 2 つの要素を展開してみてください。他の要素がずれることはありません。

EDIT2:興味のある方は、max-height値を介してシフトが発生しました。デモ用に 100 に設定すると、メニュー項目はシフトしませんが、コンテンツが切り取られ、最小高さが短いということは、メニュー項目を将来はかなり負担になります。

残念ながら、CSS トランジションでは高さを 0 から auto に移行するのと同じくらい簡単なことは不必要に複雑に見えます!

4

1 に答える 1

1

これはあなたが求めているものですか？

$(document).ready(function() {

$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');    
    $(this).next().slideDown('normal');
});


$("div.accordionContent").hide();

}); </p>

http://jsfiddle.net/ma9ic/zR5aY/2/

于 2012-12-12T16:12:43.290 に答える