【javascript,HTML,CSS】アコーディオンメニュー作成(jQueryなし)

【javascript,HTML,CSS】アコーディオンメニュー作成(jQueryなし)

シンプルなアコーディオンメニューをjavascriptで作成しました。

今回もJQueryなしで作ってみたいと思います。

デモ↓。

resultでデモが見れます。

See the Pen toggle by nishi (@nishi-094) on CodePen.

では行ってみましょう!

1.HTMLでリストメニューを作る

 

divの中に、<ul>と<li>を作成します。

今回の作成では<ul>はメニュー名、<li>はその下のコンテンツ名を表示しています。

この<li>は、初期表示で隠しておき、<ul>をクリックしたら表示させるように作ります。

 

2.CSSで形を整える&サブメニュー(クリックして開くところ)を隠しておく。別に表示するクラスも作っておく

cssを見てみます。

ここで注目するのは下の方にある、.contents{、.open{ のCSSです。

.contents{ は height:0px; 、opacity:0;としていて、高さ0、透明度0(完全に透明)としています。

.open{ はheight:20px; 、opacity:1; としていて、高さ20px、透明度1(完全に不透明)としています。

.openクラスは、HTMLを見てみるとどこにも付与されていません。

この.openクラスを.contentクラスに追加付与することによって、表示させるようにします。

 

3.JSでクリックしたときに、サブメニューにCSSで表示の指定をしていたクラスを付与して表示する

document.querySelectorAll(“.menu”);で.menuのクラスがついている要素ををすべて取得します。

ちなみにquerySelectorAllを使用すると、返す値がNodeListという形になります。(arrayじゃないのね・・・)

NodeListについてはここを参照しました。

 

次に function toggle() の中身を見ていきます。

this.nextElementSibling;ですが、ここではthis( = menu)の次の要素を取得するものになります。

つまり、menuの下の.contentsを取得してくれます。(これを変数に格納しています)

 

contents.classList.toggle(“open”); は 

contents(作成した変数)にopenクラスがなければ付与、あれば削除するという形です。

下記のように使います。

ElementにclassNameがあれば削除、なければ追加ということらしいです。

それを、forでmenuをクリックしたら、toggle関数を実行する、を繰り返します。

※addEventListenerの記事はこちらにも↓

すると、クリックしたらopenクラスが付与されて、そのCSSが反映し、表示される、という形になります。


※おすすめのHTMLとCSSの学習本。実際のコードと、とにかく中身がオシャレなレイアウトが多いです。