アコーディオンメニューの動かし方について

前提・実現したいこと

htmlを１から勉強しているものです。いろんな格好いいサイトを拝見しながらjavascriptを学んでいます。
アコーディオンメニューの動かし方について質問があります。

https://www.webcreatorbox.com/
『webクリエイターボックス』のモバイル用のサイトでは、メニューボタンを押すと、上から項目が降りてきます。
このとき、メニューボタンを押すと

<div class="flexnav flexnav-open"> となり、閉じるボタンを押すと、 <div class="flexnav"> となってメニューが閉じます。

どのような設定をすれば、メニューボタンのクリックの動作で、　class="flexnav-open" が付いたり消えたりするのですか？

<head>-</head>内を見ても自分ではメニューの箇所のscriptを見つけられませんでした。この『webクリエイターボックス』さんのサイトではどのように設定してあるのですか？

教えていただければ光栄です。よろしくお願いいたします。

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

提示された仕様での簡単な例

javascript
1<style>
2#menu{border:1px solid #000000;width:100px;text-align:center}
3.flexnav:not(.flexnav-open){display:none}
4.flexnav.flexnav-open{display:block}
5</style>
6<script>
7window.addEventListener('DOMContentLoaded', function(e){
8  document.querySelector('#menu').addEventListener('click',function(e){
9    [].forEach.call(document.querySelectorAll('.flexnav'),function(x){
10      x.classList.toggle('flexnav-open');
11    });
12  });
13});
14</script>
15<div id="menu">menu</div>
16<div class="flexnav">
17<ul>
18<li>1</li>
19<li>2</li>
20<li>3</li>
21<li>4</li>
22</ul>
23</div>

投稿2018/11/09 09:41

yambejp

総合スコア114827

ベストアンサー

classの操作設定です
指定したい要素を全てidで管理して
getElementById使ってください

js
1メニューボタン.onclick=function() {
2  flexnav要素 .classList.add('flexnav-open'); //class付ける
3}
4閉じるボタン.onclick=function() {
5  flexnav要素 .classList.remove('flexnav-open'); //class消す
6}

要素の指定をclassで行いたい場合はHTMLCollection の理解が必要になります
そこまで求めてない場合jqueryが楽ですよ

jquery
1  $(function() {
2    メニューボタン.on('click',function() {
3      $('flexnav').addClass('flexnav-open'); //class付ける
4    })
5    閉じるボタン.on('click',function() {
6      $('flexnav').remeveClass('flexnav-open'); //class消す
7    })
8  });