JavaScriptでクリックすると隠してあるメニューが開くようにしたい

前提・実現したいこと

div(spmenu-inner-bottom-flex)をクリックすると、display:noneにしてあるメニューが開くようにしたい。

発生している問題・エラーメッセージ

変化が見られない。

該当のソースコード

HTML
1<ul>
2   <li class="spmenu-inner-bottom">
3     <div class="spmenu-inner-bottom-flex">
4       <div>商品</div>
5       <span></span>
6     </div>
7     <ul>
8      <li><a href="">商品一覧</a></li>
9      <li><a href="">栄養成分一覧</a></li>
10      <li><a href="">新商品情報</a></li>
11     </ul>
12   </li>
13
14   <li class="spmenu-inner-bottom">
15     <div class="spmenu-inner-bottom-flex">
16       <div>キャンペーン・エンタメ</div>
17       <span></span>
18     </div>
19     <ul>
20      <li><a href="">キャンペーン・エンタメ トップ</a></li>
21      <li><a href="">キャンペーン一覧</a></li>
22      <li><a href="">ポイントをつかう</a></li>
23      <li><a href="">おトクなクーポン</a></li>
24     </ul>
25   </li>
26</ul>

css
1
2.spmenu-inner-bottom-flex{
3  color: #fff;
4  font-size: 20px;
5  margin-bottom: 20px;
6}
7 
8.spmenu-inner-bottom-flex{
9  display: flex;
10  justify-content: space-between;
11}
12
13.spmenu-inner-bottom span{
14  display: inline-block;
15  width: 0;
16  height: 0;
17  border: 6px solid transparent;
18  border-top-color: grey;
19  margin-top: 10px;
20}
21
22.spmenu-inner-bottom ul li a{
23  display: inline-block;
24  font-size: 18px;
25  padding-left: 30px;
26  margin-bottom: 20px;
27  color: #f9f57c;
28}
29
30.spmenu-inner-bottom ul {
31  display: none;
32}
33
34.spmenu-inner-bottom ul.active{
35  display: block;
36}
37

JavaScript
1  const parentMenu = document.getElementsByClassName("spmenu-inner-bottom-flex");
2  const childMenu = document.querySelector(".spmenu-inner-bottom > ul");
3    parentMenu.addEventListener("click",() => {
4      childMenu.classList.toggle("active");
5    });

試したこと

隠してあるulに、Javascriptでactiveというclass名をつけたり外したりすることで開いたり閉じたりする仕組みを作ろうとしていますが、コードの誤りがあるようで反映されません。
JavaScript初心者で、どうにかこうにか考えてコードを作成しましたが、何が誤っているのかがわからない状態です。
どなたかご助言いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.spmenu-inner-bottom > ul:not(.active){
2display:none;
3}

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  const parentMenu = document.querySelectorAll(".spmenu-inner-bottom-flex");
3  parentMenu.forEach(x=>{
4    x.addEventListener("click",() => {
5      x.nextElementSibling.classList.toggle("active");
6    });
7  });
8});