質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.51%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 110

score 10

前提・実現したいこと

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

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

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

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

現状

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

失敗・検証中:2階層目をクリック→ドロップダウン展開、ドロップダウンの高さが取得できない→2階層目を再クリック、ドロップダウンが閉じる→1階層目をクリック、2階層目クリック時に取得失敗したであろう謎の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;
}

教えていただきたいこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • iambeginnerr

    2021/10/02 22:00

    度々すみません!
    先程の返信で、li.areaに「style="padding-bottom: 20px;"」とお伝えしましたが、どうやらこの数値はul.childrenに指定しているmargin:10pxの上下マージンと思われます。
    ですので、高さは取得できているが、何らかの理由で中身分が抜けてしまいっている状態のようです。

    他サイトで、高さの取れないdivにoverflow:hiddenを指定するという記事を見かけましたので、試しましたが変化なしでした(ul.children内要素はfloatで横並びになっています)。

    もし関連があればと思い、本文にプルダウン部分のjQueryコードも追記しました。
    お手隙の際はご覧いただければ助かります!

    キャンセル

  • Lhankor_Mhy

    2021/10/04 15:51

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

    キャンセル

  • iambeginnerr

    2021/10/14 14:24

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

    キャンセル

回答 1

check解決した方法

0

実際のコードを何度も検証したのですが、原因が特定できなかったため、CSSのタブ切り替えを使用して高さを保持する方法に切り替えました。
お付き合いいただいた皆様ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る