アコーディオンメニュー（ドロップダウンメニュー）をjQueryで実装してみる（パターン1）（備忘録）

今回は、jQueryを使ったアコーディオンメニューを実装する。

仕様については、下記の記事と同じようになっている。

ページを読み込み時に閉じた状態のメニューをクリックすると展開され、展開されたメニューをクリックすると閉じる仕様になっている。

それでは解説に入っていく。

htmlの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アコーディオンメニュー</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <!-- アコーディオン -->
        <div class="bl_accordion">
          <h3 class="bl_accordionTitle">タイトル1</h3>
          <div class="bl_accordionContent">
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
          </div>
          <h3 class="bl_accordionTitle">タイトル2</h3>
          <div class="bl_accordionContent">
            <p>タイトル2の内容が入ります</p>
            <p><img src="img_sample01.jpg" alt="サンプル画像"></p>
          </div>
          <h3 class="bl_accordionTitle">タイトル3</h3>
          <div class="bl_accordionContent">
            <p>タイトル3の内容が入ります</p>
            <ul class="md_markList">
              <li>タイトル3の内容が入ります</li>
              <li>タイトル3の内容が入りますタイトル3の内容が入りますタイトル3の内容が入りますタイトル3の内容が入ります</li>
              <li>タイトル3の内容が入ります</li>
              <li>タイトル3の内容が入ります</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="style.js"></script>
</body>
</html>

ソースは冒頭で紹介した記事の時と変わっていない。

該当の記事はこちら

cssの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  width: 100%;
}

/* ==========================
  アコーディオンメニュー
========================== */
.bl_accordion {
  background-color: #fff;
}
.bl_accordionTitle {
  font-size: 28px;
  font-weight: bold;
  background-color: #d6a194;
  padding: 20px 90px 20px 40px;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.bl_accordionTitle::before {
  content: "";
  width: 40px;
  height: 3px;
  background-color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 40px;
  transition: 0.3s;
}
.bl_accordionTitle::after {
  content: "";
  width: 3px;
  height: 40px;
  background-color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 59px;
  transition: 0.3s;
}
.bl_accordionTitle.active::before {
  opacity: 0;
  transform-origin: center;
  transform: rotate(90deg);
}
.bl_accordionTitle.active::after {
  transform-origin: top center;
  transform: rotate(90deg) translateX(-50%);
  right: 40px;
}

.bl_accordionTitle:hover::after,
.bl_accordionTitle:hover::before,
.bl_accordionTitle.active::after,
.bl_accordionTitle.active::before {
  background-color: #fff;
}
.bl_accordionTitle:hover,
.bl_accordionTitle.active {
  background-color: #6d2412;
  color: #fff;
}
.bl_accordionContent {
  display: none;
  padding: 40px;
}
.bl_accordionContent > * + * {
  margin-top: 10px;
}
/* ==========================
  タブ以外のコンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 30px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 250%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}
.md_markList {
  list-style-type: disc;
  margin-left: 1.4rem;
}

/* ====================================
  ここからPC幅
==================================== */
@media screen and (min-width: 768px) {
  .hp_displaySP {
    display: none !important;
  }
}

/* ====================================
  ここからスマホ幅
==================================== */
@media screen and (max-width: 767px) {
  .hp_displayPC {
    display: none !important;
  }
}

jQueryのslideToggle（jQuery部分で解説）でアコーディオンメニューの開閉の動きを実装するため、cssではopacityで透明にしたり、heightを０にしたり、visiblityをhiddenにしたりといった調整が不要になる。

そのため、こういった記述は削除している。これによりアコーディオンメニューの中身がjQuery側でdisplayのnoneとblockで表示を制御できるようになる。

jQueryの記述について

'use strict';

// アコーディオン
$(document).ready(function(){
  $(".bl_accordionTitle").on("click", function () {
    $(this).toggleClass("active");
    $(this).next().slideToggle();
  });
});

以前のjavascriptの記述と比べると、たったこれだけの記述で済む。

やっていることとしては、ページを読み込んでからbl_accordionTitleをクリックした時、bl_accordionTitleに対してactiveというクラスがつき、さらに、その次の兄弟要素bl_accordionContentがslideToggleによって展開されるようになっている。

thisはbl_accordionTitleのことを指している。省略できるコードはこのように簡略化して記述することで見やすいコードになる。

特に大規模なページを作成するときに役に立つので、普段から見やすいコードを書けるように心がけておくようにしている。

toggleClassは、クラスがついていなければ追加してくれ、クラスがついていれば削除してくれるものと認識いただければよい。

slideToggleは、要素が展開されていなければ、slideDownにより要素が展開され、要素が展開されていれば、slideUpで要素の展開が閉じるものだと認識いただければよい。

以上で終わりだ。意外と実装は難しくないので、手軽に使うならよさそうだ。