ドロップダウンの高さを取得して、CSSに追加指定をしたい

前提・実現したいこと

いつもお世話になっております。

3階層のドロップダウンを作成中です。
WPのプラグインを使用しているため、htmlの編集はできません。

プルダウン部分CSSで、position:absoluteを指定しています。
そのため、次に続く要素が重なってしまいます。
この重なりを解消し、ドロップダウンで開いた高さ分、次要素を下にずらしたいと考えています。

そこで考えたのが、jQueryで開いたドロップダウンの高さを取得し、次要素と同じ階層に位置する親要素に動的にpaddingを与えるという案です。

現状

成功：１階層目をクリック→ドロップダウン展開、ドロップダウンの高さに合わせてpadding付与→１階層目を再クリック、ドロップダウンが閉じると共に付与されたpaddingも消去

失敗・検証中：２階層目をクリック→ドロップダウン展開、ドロップダウンの高さが取得できない→２階層目を再クリック、ドロップダウンが閉じる→１階層目をクリック、２階層目クリック時に取得失敗したであろう謎のpaddingが残ってしまい不自然な余白ができてしまう

該当のソースコード

html

<ul>
<li class="genre">
<h4>ジャンル</h4>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li><!-- .genre -->
<li class="area">
<h4>エリア</h4>
<ul>
<h5>関東</h5><!-- h5クリックでdiv.innerが開く -->
<div class="inner">
<li class="level-0"><!-- li.level-0クリックでul.childrenが開く -->
<input type="checkbox" value="saitama" id="saitama">
<label for="saitama">埼玉県</label>
<ul class="children">
<li class="level-1">
<input type="checkbox" value="saitamasi" id="saitamasi">
<label for="saitamasi">さいたま市</label>
</li>
<li>...</li>
<li>...</li>
</ul>
</li><!-- .level-0 -->
</div>
</ul>
</li><!-- .area -->
<li class="tag">
<h4>タグ</h4>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li><!-- .tag -->
</ul>

jQuery

//高さ取得等の処理
$(function() {
$('form h5').click(function() {
$('.area').toggleClass('p-bottom');
});
});

$(function() {
$('.area .level-0').click(function() {
var height = $('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;
}

教えていただきたいこと

２階層目をクリックしul.childrenの高さを取得しCSSにpaddingを付与する流れも、１階層目と同様にtoggleClassで行えば良いのではと思ったのですが、取得した高さをどのように動的にCSSに反映させれば良いのか分からず、jQueryで直接CSSを指定する方法を取ってみました。
２階層目クリック時にtoggleClassを使用すべきか、その場合はどのようにCSSに動的な高さを指定すれば良いのでしょうか。
もしくは、このままjQueryで直接CSSを指定する方法を取ったとして、ドロップダウンを閉じた際に付与したpaddingを全て消去し、元の状態に戻すにはどのように記載するのが良いのでしょうか。

調べてみたのですが、求める情報になかなか辿り着けずにおります。
jQueryは初心者です。
どうか解決策をご教授ください。
よろしくお願いいたします！！

Lhankor_Mhy

2021/10/02 01:12

ご提示のコードを試してみましたが、「２階層目をクリック→ドロップダウン展開、ドロップダウンの高さが取得できない」という問題が再現しませんでした。高さを取得できているようです。 https://jsfiddle.net/Lhankor_Mhy/rtuayows/

iambeginnerr

2021/10/02 12:42

検証していただきありがとうございます！確認しましたところ、高さが取得できていますね... しかし制作中のページではなぜか高さが取得できていませんでした。デベロッパーツールのコード確認すると、２階層目をクリックした際に、li.areaに「style="padding-bottom: 20px;"」と追加されていました。この時の実際のul.childrenの高さは、331.73pxでした。ですので、正確な高さが取得できていないようです。他箇所のCSSやプルダウンに使用しているJquery等の干渉などあったりするのでしょうか。 CSS等探ってみます。何か思い当たる点がありましたら、ご返信いただければ幸いです。

iambeginnerr

2021/10/02 13:00

度々すみません！先程の返信で、li.areaに「style="padding-bottom: 20px;"」とお伝えしましたが、どうやらこの数値はul.childrenに指定しているmargin:10pxの上下マージンと思われます。ですので、高さは取得できているが、何らかの理由で中身分が抜けてしまいっている状態のようです。他サイトで、高さの取れないdivにoverflow:hiddenを指定するという記事を見かけましたので、試しましたが変化なしでした（ul.children内要素はfloatで横並びになっています）。もし関連があればと思い、本文にプルダウン部分のjQueryコードも追記しました。お手隙の際はご覧いただければ助かります！

Lhankor_Mhy

2021/10/04 06:51

ご提示いただいているコードでは、.level-0 が常に表示されていますが、実際のコードでは消えているタイミングがあるのではないでしょうか。その影響ではないのかな、と思います。

iambeginnerr

2021/10/14 05:24

何度も質問にお付き合いくださりありがとうございます。検証したのですが、はっきりとした原因がわからなかったため別な方法で解決いたしました！ありがとうございました！