質問: $('ul.children').outerHeight(true); $('.area').css('padding-bottom', height + 'px'); }); }); //プルダウン部分 ⇦★追記★ //親カテゴリープルダウン $(function(){ $('form h5').click(function(){ $(this).next().slideToggle(); $('form h5').not($(this)).next().slideUp(); }); }); //子カテゴリプルダウン $(function(){ $('form .level-0').on('click', function() { $(this).next().slideToggle(); $('form .level-0').not($(this)).next().slideUp(); }); }); ``` CSS ※必要と思われる箇所のみ記載しましたが、不足していたらご指摘ください! ``` h5 { height:36px; } div.inner { position:absolute; } ul.children { position: absolute; } .p-bottom { padding-bottom:40px; } ``` ### 教えていただきたいこと 2階層目をクリックしul.childrenの高さを取得しCSSにpaddingを付与する流れも、1階層目と同様にtoggleClassで行えば良いのではと思ったのですが、取得した高さをどのように動的にCSSに反映させれば良いのか分からず、jQueryで直接CSSを指定する方法を取ってみました。 2階層目クリック時にtoggleClassを使用すべきか、その場合はどのようにCSSに動的な高さを指定すれば良いのでしょうか。 もしくは、このままjQueryで直接CSSを指定する方法を取ったとして、ドロップダウンを閉じた際に付与したpaddingを全て消去し、元の状態に戻すにはどのように記載するのが良いのでしょうか。 調べてみたのですが、求める情報になかなか辿り着けずにおります。 jQueryは初心者です。 どうか解決策をご教授ください。 よろしくお願いいたします!!
回答: 実際のコードを何度も検証したのですが、原因が特定できなかったため、CSSのタブ切り替えを使用して高さを保持する方法に切り替えました。 お付き合いいただいた皆様ありがとうございました。