一部開いた状態のアコーディオンメニュー（ドロップダウンメニュー）をjQueryで実装してみる（パターン2）（備忘録）

/カテゴリ: , , , , /作成者:

今回は、前回のjQueryを使ったアコーディオンメニューから、1のメニューだけを開いた状態を実装する。

demo

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

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 active">タイトル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>

タイトル1に下記のようにactiveのクラスをつけただけである。

<h3 class="bl_accordionTitle active">タイトル1</h3>

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::after {
  opacity: 0;
}

.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_accordionTitle + .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の記述について

'use strict';

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

やっていることとしては、まずhtml側でactiveがついているソースを見つけ出し、その次の兄弟要素がjQueryのshowで展開されるようになっている。

あとは前回と同じで、bl_accordionTitleが付いているクラスのタイトルをクリックした時に、次の兄弟要素にslideToggleが発火して開閉するようになっている。また同時に、toggleClassによりactiveのクラスがついたり消えたりの切り替えができる。

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