クリックで開閉するヘッダのプルダウンコード（任意の場所をクリックして閉じられる処理あり）

更新日：2024年6月19日
公開日：2023年6月16日

コーダーのオッコです。

ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。

ヘッダの右上にプルダウンのボタンがある前提の命名になっています。

HTML
<div class="header_right">
　<li><span>会員情報</span>
　　<ul class="child">
　　　<li><a href="/">マイページ</a></li>
　　　<li><a href="/">ログアウト</a></li>
　　</ul>
　</li>
</div>

JS
<script>
    //アコーディオン
    $(function () {
        $(".header_right").on("click", function(){
            if($(".header_right .child").hasClass("active")) {
                $(".header_right .child").slideUp(500);
                $(".header_right .child").removeClass("active");
            } else {
                $(".header_right .child").slideDown(500);
                $(".header_right .child").addClass("active");
            }
        });
    });
    //ページ上の任意の場所をクリックしたときヘッダーのプルダウン（アコーディオン）が開いていたら閉じる
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.header_right').length) {
            $(".header_right .child").removeClass("active");
            $(".header_right .child").slideUp(500);
        }
    });
</script>

大筋以外は突っ込みどころ満載ですが許してください。制約もあり100%のコーディングってなかなかできないものです。（自分に言い聞かせる）

もしslideUp/slideDownが効かなかったら、大元のdivタグ（ここでいうheader_right）をあらかじめdisplay:inline;にしておくといいらしい。

blockだと効かないらしい。参考→jQuery slideUp slideDownがうまく動かない現象

ヘッダープルダウンの作成方法を調べると、検索ホバーで開閉するコードばかり出てくるのですが、ホバーよりクリックの方が需要がある気がするのは気のせいでしょうか。