仕様
- アイテム①〜③のいずれかをクリックするとアイテムの下部にテキストが表示される
- 表示中のものはもう一度クリックすると非表示になる
- アイテム右端にある
+を表示/非表示に合わせて回転させる
仕組み
各アイテムのテキスト要素にはデフォルトでheight: 0;を設定（非表示状態）
クリックした際にテキスト要素の高さを取得し、height: テキスト要素の高さ;を設定（表示状態）
アイテムの各要素にactiveをつけたり外したりすることで+を回転させる
完成形
See the Pen Untitled by 引地澄佳 (@vqjkiggh-the-lessful) on CodePen.
Javascript
// クラス名：list-itemの各要素を取得
const item = document.querySelectorAll(".list-item");
// クラス名：list-itemの各要素に処理を実行
item.forEach((li) => {
// クラス名:list-itemの各要素にクリックイベントを設置、クリックされたら関数内の処理を実行していく
li.addEventListener("click", () => {
// クラス名：list-itemの配下のtext要素を取得
const text = li.querySelector(".text");
// containsメソッドでlist-itemにactiveというクラス名が存在するか判定、判定結果をisActiveに代入
const isActive = li.classList.contains("active");
// list-item要素にクラスactiveがなければ追加・あれば削除
li.classList.toggle("active");
// isActiveがtrueであればheightに0を設定、falseであればtext要素の高さを取得してheightに設定
text.style.height = isActive ? 0 : text.scrollHeight + "px";
});
});
querySelectorAll
指定したCSSセレクタを持つ要素を取得するメソッド
forEach
反復処理のメソッド。指定した配列の各要素を一つずつ呼び出し、各要素に処理を与えることができる。
querySelectorAll()で取得した要素はオブジェクトに分類されるが、配列風のオブジェクトであるため例外的にforEach()を使用することができる。
addEventListener
addEventListenerはメソッドの一つで、指定した要素で指定されたイベントが発生した際に任意の処理を実行させることができる。
💡基本の書き方
イベントが発生する要素.addEventListener("イベントの種別", function() {・・・});
↓この部分
li.addEventListener("click", function() {・・・});
アロー関数を用いて関数の記述を省略したので下記のようになる。
li.addEventListener("click", () => {・・・});
querySelector
指定したCSSセレクタと一致する最初の要素を取得するメソッド
classList
指定した要素のクラス名を含むオブジェクトを返すプロパティ。
classListプロパティはDOMTokenListオブジェクト（インターフェイス）を持っている。
というのもclassListはDOMTokenListのインスタンスなので、classListを呼び出すことでDOMTokenListも呼び出している。
DOMTokenList
スペースで区切られた属性値（クラス名など）やその属性値を操作するためのメソッドを持つオブジェクト。
（↑上記のような便利な機能がまとまっているのでDOMTokenListはインターフェイス（部品・機能）でもある）
そのメソッドがcontainsメソッドやtoggleメソッド。
DOMTokenListはクラスとして定義され、インスタンス化されており、Element.classListなどのインスタンスを使って呼び出すことができる。
インターフェイス
部品や機能の集まり
参考記事：インターフェイス
contains
対象の要素に指定したクラス名が存在するか判定するメソッド。
DOMTokenListオブジェクト（インターフェイス）のメソッド(DOMTokenListという機能の一部)。
対象の要素.classList.contains("クラス名");
toggle
対象の要素のクラスの有無を切り替えるメソッド。
クラスの有無を判別して、なければクラスを追加、あれば削除をしてくれる。
DOMTokenListオブジェクト（インターフェイス）のメソッド(DOMTokenListという機能の一部)。
対象の要素.classList.toggle("クラス名");
style
指定した要素のスタイルをオブジェクトで返すプロパティ
オブジェクトにはスタイルの各プロパティ（font-sizeとかCSSのプロパティ）が格納されており、それを用いることでスタイルを操作することができる。
三項演算子
if文を省略して簡素に書くことができる記述
↓この部分
isActive ? 0 : text.scrollHeight + "px";
💡基本の書き方
条件式 ? Trueの処理 : Falseの処理;
↓今回三項演算子を用いて省略した部分をif文に直すとこうなる
// isActiveがtrueの場合
if (isActive) {
0
// isActiveがfalseの場合
} else {
text.scrollHeight + "px"
}
scrollHeight
対象の要素のあふれて画面上に表示されない部分を含めた、要素の高さを取得する
要素内に収まっている場合は、clientHeightと同じ
clientHeight
対象の要素の高さを取得する