JavaScriptで開閉メニューのプログラムを解説【JQuery】

2020年5月8日システムJavaScript,プログラムコード,プログラム入門

【初心者】JavaScriptでtoggleを使ってアコーディオンするプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptでtoggleを使ってアコーディオンするプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングする解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細:プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptで開閉メニューのプログラミング

JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングの解説をします。

開閉メニューは1行で簡単に出来ます!

toggleとは

toggleは、JQueryのメソッドです。対象のHTML要素に対して表示/非表示を簡単に切り替ることが出来ます。

サンプルコード【JavaScriptで開閉メニュー】

JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングのサンプルコードから紹介します。
(基本的にコピペで動くと思います。)

今回はクリックイベントなどを簡単に行えるように「JQuery」を使っています。

<html>
<head>
    <meta charset="utf-8">
    <title>Toggle Sample</title>
    <style>
        body {
            text-align: center;
        }
        .nav dt {
            font-weight: bold;
        }
        .nav dl {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Toggle Sample</h1>
    <dl class="nav">
        <dt class="menu">menu(1)</dt>
        <dl>title(1-1)</dl>
        <dl>title(1-2)</dl>
    </dl>
    <dl class="nav">
        <dt class="menu">menu(2)</dt>
        <dl>title(2-1)</dl>
        <dl>title(2-2)</dl>
    </dl>
    <button type="button" class="btnToggle">toggle</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.btnToggle').click(function () {
                $('.nav').find('dl').slideToggle();
            });

            $('.menu').click(function () {
                $(this).parent('dl').find('dl').slideToggle();
            });
        });
    </script>
</body>
</html>

HTML部分の解説【JavaScriptで開閉メニュー】

JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのHTML部分から解説をします。

HTMLはシンプルです。

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

メニュー用リストを作成

メニュー用リストをdlタグで用意します。

<dl class="nav">
    <dt class="menu">menu(1)</dt>
    <dl>title(1-1)</dl>
    <dl>title(1-2)</dl>
</dl>
<dl class="nav">
    <dt class="menu">menu(2)</dt>
    <dl>title(2-1)</dl>
    <dl>title(2-2)</dl>
</dl>
<button type="button" class="btnToggle">toggle</button>

JQueryをCDNで読み込む

JavaScriptでボタンイベント定義を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

CSS部分の解説【JavaScriptで開閉メニュー】

JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのCSS部分を解説します。
(JavaScriptのtoggleで表示/非表示が切り替わるようにする)

CSSは見た目の調整程度です。

styleタグを用意してスタイルを定義

スタイルを記述するためにstyleタグを記述します。

<style>
・・・
</style>

テキストをセンタリング

テキストをセンタリング表示になるようにスタイルします。

body {
    text-align: center;
}

メニューを太字

メニューの項目を太字になるようにスタイルします。

.nav dt {
    font-weight: bold;
}

メニューを非表示

メニューリストのdlタグは表示されないようにスタイルします。

.nav dl {
    display: none;
}

※JavaScriptでクリック時に表示するようにします。

JavaScript部分の解説【JavaScriptで開閉メニュー】

JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのJavaScript部分の解説をします。

JavaScriptは、開閉メニューを1行で出来ちゃうくらいシンプルです。

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptでプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

読み込み完了で実行させる

読み込み完了時に実行するように「$(document).ready();」と定義します。

$(document).ready(function () {
});

ボタンのクリックイベントを定義

class名が’btnToggle’のボタンにクリックイベントを定義します。

$('.btnToggle').click(function () {
});

dlタグをtoggle

CSSで表示しないようにしたdlタグに対してtoggleで表示するようにします。これでメニューが開閉させます。

$('.nav').find('dl').slideToggle();

おまけ機能

おまけ機能としてボタン同様にメニューをクリックしてもメニューが開閉するようにします。

メニューのクリックイベントを定義

class名が’menu’のdtタグにクリックイベントを定義します。

$('.menu').click(function () {
});

メニューが開閉するようtoggleさせる

dlタグをtoggleでメニューが開閉するようにします。

$(this).parent('dl').find('dl').slideToggle();
  • $(this)
    • thisとは自分を指します
    • つまり今回は
    • クリックされたメニューのclass名がmenuのdtタグ
  • parent('dl’)
    • parentは親を指します
    • つまり
    • class名がmenuのdtタグの親であるdlタグ
  • find('dl’)
    • dlタグの配下にあるdlタグを検索
  • slideToggle()
    • toggleさせます

まとめ

今回はJavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードの紹介と解説をしました。

開閉メニューはWebページによく使われる技術なので、ぜひチャレンジしてください!

開閉メニューを終えた人へ

開閉メニューのtoggleはWebページでよく使うことがあります。今回のサンプルをカスタマイズして「ボタンクリックですべてのメニューを開閉する」などドンドンと変更してチャレンジしてみてください!

最後まで読んでもらいありがとうございます。

【勉強】JavaScriptのtoggleでアコーディオン【プログラミング初心者の入門講座】#StudyWithMe
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年5月8日システムJavaScript,プログラムコード,プログラム入門

Posted by UT