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

プログラミング初心者が、JavaScriptでアコーディオンメニュー作ってみました。
素のJavaScriptです。
昨日、投稿したものを、動きを変えました。

<a href="https://neptune.sakura.ne.jp/qiita/accordion002/">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;
}
```

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

//アコーディオンの開閉
function accordion() {
    const subsAll = document.querySelectorAll('.subs');
    const mainAll = document.querySelectorAll('.main');
    
    //全てのアコーディオンを閉じる
    for (const item of subsAll) {
        item.setAttribute('style','display:none');
    }
    
    //アコーディオンをクリック部分のみ開く
    for(let i = 0; i < mainAll.length; i++) {
        mainAll.item(i).addEventListener('click', function(){
            subsAll.item(i).removeAttribute('style');
        });
    }
    
    //他のアコーディオンをクリックすると、開いていたアコーディオンは閉じる
    for(let j = 0; j < subsAll.length; j++){
        mainAll.item(j).addEventListener('click', function(){
            for(let i = 0; i < subsAll.length; i ++) {
                if (i !== j) {
                    subsAll.item(i).setAttribute('style','display:none');
                }
            }
        });
    }
}

accordion();
```