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

コーダーのオッコです。

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

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

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がうまく動かない現象

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

関連記事紹介

あわせて読みたい

window.onloadがipad/iphoneで動かなかった話【javascript】 デザイナーのオッコです。 レスポンシブ対応のため、iPad proでテストを行ったところ、fullCalendarが出るはずの部分がまっさらでカレンダーが表示されていませんでした...

あわせて読みたい

【jquery】iOS用クリックイベント「touchend」で二重にイベントが発火していた件【iPad】 デザイナーのオッコです。 今から、私が悩んだiPadでの挙動についての解決策をお話ししようと思います。 iPadでプルダウンをタップするとすぐ閉じてしまう iPadでヘッダ...

あわせて読みたい

iOSでリンク付きの画像をタップしたときにデフォルトで青くなってしまうのを解消 こんにちは、コーダーのオッコです。 直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青...

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか？

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら↓

https://apice-tec.co.jp/実績紹介

ITツール紹介ページはこちら↓

あわせて読みたい

429 Too Many Requests