アコーディオンメニューの作り方

アコーディオンメニューの作り方をを記載しました。

<main>
<ul class="menu">
 <li>
 <a href="">親メニュー1</a>
   <ul>
   　<li><a href="">子メニュー1</a></li>
   　<li><a href="">子メニュー2</a></li>
   </ul>
 </li>

   <li>
   <a href="">親メニュー2</a>
   <ul>
    <li><a href="">子メニュー1</a></li>
    <li><a href="">子メニュー2</a></li>
    </ul>
   </li>
　</ul>
 </main>

①ulクラスで全体を囲み
②その子要素としてaタグで親メニューと、改めてulクラスを設定して子クラスを設定する
③ulには、menuというクラスをつける。これは、javascriptでulクラス全体を取得するために
必要

div,a,ul {
  padding: 0;
  margin: 0;
}
main {
  width: 1000px;
  margin: 0 auto;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.menu ul {
  display: none;
}
.menu ul.active {
  display: block;
  width: 980px;
  transform: translateX(20px);
  transition: .4s;
} 

.menu > li > a {
  display: block;
  border-bottom: 1px solid black;
}
.menu > li > a::before {
  content: '';
  width: 4px;
  height: 4px;
  border: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg); 
  position: absolute;
  margin-top: 7px;
}
.menu > li > ul a {
  display: block;
  border-bottom: 1px dashed black;
}

ポイント①
.menu ul {
display: none;
}　
で、menuの中にあるulは消しておく

ポイント②
.menu ul.active {
display: block;
width: 980px;
transform: translateX(20px);
transition: .4s;
}
activeが付いたら、現れる。

'use strict'

{
  const parentMenu = document.querySelectorAll('.menu > li > a');
  for(let i = 0;i < parentMenu.length;i++) {
    parentMenu[i].addEventListener('click',function(e){
// 今起こっているイベント要素をthis
      e.preventDefault();
      this.nextElementSibling.classList.toggle('active');
    });
  }

}

const parentMenu = document.querySelectorAll('.menu > li > a');
①まずは親メニューをJavascriptで取得する。
この時、querySelectorAllは、配列で取得してくる。

for(let i = 0;i < parentMenu.length;i++)
②forで親メニューの数だけ繰り返し1つ1つ処理をしていく。
0番目の時、1番目の時、2番目の時と一つ一つ行い、iがparentMenu.lengthの
数を超えることはないので、clickイベントは一生行われる

③e.preventDefault();
aタグがページしないようにこの記述をする

④this.nextElementSibling.classList.toggle('active');
thisは、このイベント（click）でnextElementSibling（兄妹要素）に対して
active要素を付ける