【jQuery】を利用して「縦並びsideメニューをアコーディオン化」（ドロップダウンメニュー作成）

以前「HTML/CSS」のみでの縦並びsideメニューのアコーディオン化についてまとめました。↓

「サイドナビゲーションのアコーディオンメニュー（ドロップダウンメニュー）作成...

https://denkenmusic.com/「サイドナビゲーションのアコーディオンメニュ

前回はヘッダー部のグローバルメニューのアコーディオンメニュー（ドロップダウン式）を作成しましたので、続いてサイドメニューのナビゲーションをアコーディオン化したいと思います。前回に引き続き、HTMLとCSSのみの記述で作成します。※ヘッダー部のアコーディオンメニューはこちらでまとめています。↓　それでは前回のHTML、CSSファイルに追加記述して作成したいと思います。HTMLタグとタグを使用する

今回は【jQuery】を使用したsideメニューのアコーディオン化についてまとめたいと思います。

ｊQueryは、JavaScriptで作成されたライブラリ（複数のプログラムをひとまとめにしたようなもの）で、JavaScriptをより簡単な記述で利用できます。

記述箇所については、HTMLでは内部に埋め込む「インライン」と、別途専用ファイルを作成しそれを呼び出す「外部スクリプト」があります。

今回は両方のパターンを記しておきたいと思います。

使用するデータ（HTML/CSS)は、当ブログの過去記事で作成したものを元とし、進めていこうと思います。↓

ヘルニアクソ野郎エンジニアblog

html/css「見出しと本文を入れてホームページを完成させよう！」

https://denkenmusic.com/html-css「見出しと本文を入れてホームページを完成さ

ホームページ制作第6回目、一応今回で最終となります。前回は共通フレームの作成まで実施しました。↓今回は、各ページのmain要素に見出しや本文を入れて、WEBサイトを完成させたいと思います。各ページのhtml５つ項目があるので、5ページの記述が必要ですが、今回はだいたい全てのページが同じような記述になりますので、代表して「index.html」のページだけ抜粋して説明します。index.html（home）

1 jQueryのインラインブロック記述
2 jQueryの外部スクリプト記述
3 まとめ

jQueryのインラインブロック記述

<head>
    <meta charset="UTF-8">
    <title>Webサイトのタイトル</title>
    <meta name="description" content="ページの紹介文">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" href="css/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
      <script>function acdMenu() {
                //第2階層のアコーディオン　
        $(".nav-content2 ul li p").click(function() {
            $(".nav-content2 ul li p").not(this).next().slideUp("fast");
            $(this).toggleClass("open").next().slideToggle("fast");
        });
    }
 
    $(function() {
        acdMenu();
    });
</script>
  </head>

<head>

<title>Webサイトのタイトル</title>

</script>

//第2階層のアコーディオン　

$(".nav-content2 ul li p").click(function() {

$(".nav-content2 ul li p").not(this).next().slideUp("fast");

$(this).toggleClass("open").next().slideToggle("fast");

});

}

$(function() {

acdMenu();

});

</script>

</head>

index.htmlのhead内にjQueryのスクリプトを直接埋め込みます。

上記では、head内の10行目～23行目に追加する形で埋め込んでいます。

まず、jQueryのライブラリはダウンロードしたものを使用するか、WEB上から引っ張てくるかに分かれれます。

10～11行目の記述についてはCDN を使用して HTMLファイル内でライブラリを直接読み込む記述になりますので、今回はWEBから引っ張てくる記述を使用しています。

12～23行目の記述は、jQueryで指定した要素をアコーディオンメニュー化しています。

  .nav-content2 ul li ul li a{
    color: black;
        padding: 0px 40px 0px 40px;
}
    .nav-content2 ul li {
                text-align: left;
                    }
    .nav-content2 ul li a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 5px 50px 5px 50px;
            }
    .nav-content2 p {
        padding:  0 0 0 50px;
    }
    .nav-content2 ul li:hover{
  background: black;
}
   .nav2 {
	max-width: 360px;
	margin: 0 auto;
	padding: 10px;
       background: white;
}
.nav2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
    .nav-content2 ul li {
    padding-top: 15px;
    padding-bottom: 15px;
}

.nav-content2 ul li ul li a{

color: black;

padding: 0px 40px 0px 40px;

}

.nav-content2 ul li {

text-align: left;

}

.nav-content2 ul li a {

color: white;

text-decoration: none;

display: block;

padding: 5px 50px 5px 50px;

}

.nav-content2 p {

padding: 0 0 0 50px;

}

.nav-content2 ul li:hover{

background: black;

}

.nav2 {

max-width: 360px;

margin: 0 auto;

padding: 10px;

background: white;

}

.nav2 ul {

margin: 0;

padding: 0;

list-style: none;

}

.nav-content2 ul li {

padding-top: 15px;

padding-bottom: 15px;

}

後はCSSを追加して表示を整えます。元々のサイドメニューのCSSを上記のように書き換えます。

結果については、後述する外部スクリプトと同じ内容になるので、このページ下部の動画を参照ください。

jQueryの外部スクリプト記述

HTMLから外のファイルを呼び出すので、下記のような構成になります。HTMLと同じ階層に、空ファイルを作成し、拡張子を「js」とします。（名前はtestとしておきます。）

作成した「test.js」に、インラインではhead部に記述していた「12～23行目」のjQuery文をそのまま入れます。（jQueryで指定した要素をアコーディオンメニュー化する記述）

function acdMenu() {
                //第2階層のアコーディオン　
        $(".nav-content2 ul li p").click(function() {
            $(".nav-content2 ul li p").not(this).next().slideUp("fast");
            $(this).toggleClass("open").next().slideToggle("fast");
        });
    }
 
    $(function() {
        acdMenu();
    });

function acdMenu() {

//第2階層のアコーディオン　

$(".nav-content2 ul li p").click(function() {

$(".nav-content2 ul li p").not(this).next().slideUp("fast");

$(this).toggleClass("open").next().slideToggle("fast");

});

}

$(function() {

acdMenu();

});

後は、HTMLのhead内にCDN を使用して HTMLファイル内でライブラリを直接読み込む記述と、上記のjsファイルを呼び出す記述を追加します。

 <head>
    <meta charset="UTF-8">
    <title>Webサイトのタイトル</title>
    <meta name="description" content="ページの紹介文">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" href="css/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
      <script type="text/javascript" src="./test.js">
</script>
  </head>

<head>

<title>Webサイトのタイトル</title>

</script>

</script>

</head>

10～11行目がCDN を使用して HTMLファイル内でライブラリを直接読み込む記述です。

12～13行目が、先ほど作成した「test.js」を呼び出す外部スクリプト参照先の記述になります。

CSSについては前途したものと同じになります。

インライン、外部スクリプト共に下記のような結果となります。

まとめ

・jQueryの記述には「インライン」と「外部スクリプト」があります
・jQueryのライブラリはダウンロードしたものを使用するか、WEB上から引っ張てくるかに分かれれます
・インラインではhead内にjQueryをそのまま記述します
・外部スクリプトの場合、別途jsファイルの作成が必要で、HTML head内に参照先を記述します
・CSSのスタイリングや出力される結果は両者共通

今回のようにメニューのみjQueryを利用する位であれば長ったらしい記述にもならないので「インライン」での処理でもいいですが、他にもjQueryを利用すれば自ずと記述が長くなるので、一般的には「外部スクリプト」での記述が多いみたいです。