プログラミング初心者が、JavaScriptでアコーディオンメニュー作ってみた。その3

プログラミング初心者が、JavaScriptでアコーディオンメニュー作ってみました。
素のJavaScriptです。
朝、投稿したものに、アニメーションをつけました。

<a href="https://neptune.sakura.ne.jp/qiita/accordion005/">DEMOページ</a>

```html:index.html
<body>
	<div id="wrapper">
		<div id="nav">
			<ul> 
				<li class="color-blue">
					<div class="main">メンズファッション</div>
					<ul class="subs"> 
						<li><a href="test.html">Tシャツ</a></li> 
						<li><a href="test.html">ポロシャツ</a></li> 
						<li><a href="test.html">ワイシャツ</a></li> 
						<li><a href="test.html">ベスト</a></li>
					</ul> 
				</li> 
				<li class="color-red">
					<div class="main">メンズスーツ</div>
					<ul class="subs"> 
						<li><a href="test.html">シングルスーツ</a></li> 
						<li><a href="test.html">ダブルスーツ</a></li> 
						<li><a href="test.html">オーダースーツ</a></li> 
						<li><a href="test.html">その他のスーツ</a></li> 
					</ul> 
				</li>
				<li class="color-yellow">
					<div class="main">アウトドアウェア</div>
					<ul class="subs"> 
						<li><a href="test.html">トップス</a></li> 
						<li><a href="test.html">パンツ</a></li> 
						<li><a href="test.html">インナー</a></li> 
					</ul> 
				</li>
				<li class="color-green">
					<div class="main">雑貨・小物</div>
					<ul class="subs"> 
						<li><a href="test.html">メンズベルト</a></li> 
						<li><a href="test.html">ネクタイ</a></li> 
						<li><a href="test.html">ハンカチ</a></li> 
					</ul> 
				</li> 
			</ul>
		</div>
	</div>
	<script src="./script.js"></script>
</body>
```

```css:style.css
@charset "UTF-8";
/* ------- base ------- */
body {
  background: #FFF;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  color: #FFF;
}

body, ul, li, div {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
}

a {
  text-decoration: none;
}

/* ------- wrapper ------- */
#wrapper {
  width: 740px;
  margin: 30px auto;
}

/* ------- nav ------- */
#nav {
  width: 190px;
}

#nav li {
  list-style: none;
}

div.main {
  height: 60px;
  line-height: 60px;
  text-indent: 25px;
  background-color: #3FC6F3;
  border-right: 10px solid #0D9BE5;
  cursor: pointer;
}

ul.subs li a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-indent: 25px;
  background-color: #F5F5F5;
  border-right: 10px solid #0D9BE5;
  font-size: 12px;
  color: #164158;
}

/* ------- 色の指定 ------- */
/* メインメニュー */
li.color-blue div.main {
  background-color: #8ac6d1;
  border-right: 10px solid #204969;
}

li.color-red div.main {
  background-color: #FF625F;
  border-right: 10px solid #e41749;
}

li.color-yellow div.main {
  background-color: #FEBD01;
  border-right: 10px solid #FF8D00;
}

li.color-green div.main {
  background-color: #248888;
  border-right: 10px solid #1f640a;
}

/* サブメニュー */
li.color-blue ul.subs li a {
  border-right: 10px solid #204969;
  color: #0D9BE5;
}

li.color-red ul.subs li a {
  border-right: 10px solid #e41749;
  color: #FD2621;
}

li.color-yellow ul.subs li a {
  border-right: 10px solid #FF8D00;
  color: #FF8D00;
}

li.color-green ul.subs li a {
  border-right: 10px solid #1f640a;
  color: #15B59B;
}

li.color-blue ul.subs li a:hover {
  background-color: #8ac6d1;
  color: #FFF;
}

li.color-red ul.subs li a:hover {
  background-color: #FF625F;
  color: #FFF;
}

li.color-yellow ul.subs li a:hover {
  background-color: #FEBD01;
  color: #FFF;
}

li.color-green ul.subs li a:hover {
  background-color: #248888;
  color: #FFF;
}

/* 追加 */
.subs {
  height: 0;
  overflow: hidden;
  transition: height .4s ease;
}

```

```javascript:script.js
'use strict';

function accordion(){
    const accordionTrigger = document.querySelectorAll('.main');

    for(let i = 0; i < accordionTrigger.length; i++) {
        accordionTrigger.item(i).addEventListener('click', (e) => {
            let currentElement = e.currentTarget;
            let accordionTarget = currentElement.nextElementSibling;
    
            if(accordionTarget.style.height){
                accordionTarget.style.height = null;
            } else {
                accordionTarget.style.height = accordionTarget.scrollHeight + 'px';
            }
        });
    }
}

accordion();
```