前提・実現したいこと
スマホ用のハンバーガーボタンの「開く」、「閉じる」をjavascriptで記述しました。
現状、動くには動くのですが、javascriptの記述をもっとシンプルにしたいです。
「for文と配列使えば上手くいくのでは?」と思い、試行錯誤しているのですが、難航しています。
javascriptは勉強中の為、あまり詳しくはありません。
ご助言して頂けたら幸いです。
該当のソースコード
HTML
<body id="page-top"> <header id="top"> <!-- ハンバーガーボタン --> <div id="nav-btn"><span></span></div> <!-- ナビゲーションメニュー --> <div id="nav-area"> <nav> <div class="dis-tbl_tab02 w1200 m-0a"> <a href="#" class="dis-tblcl01">HOME</a> <a href="#" class="dis-tblcl01">ABOUT US<span class="dis-non">(アクアマリーナについて)</span></a> <a href="#" class="dis-tblcl01">QUALITY<span class="dis-non">(徹底した品質管理)</span></a> <div class="dis-tblcl02"><span class="arrow-b">PRODUCTS</span> <ul id="fade-in2"> <li><a href="#">ISUP<span class="dis-non">(スタンドアップパドルボード)</span></a></li> <li><a href="#">KAYAKS<span class="dis-non">(カヤック)</span></a></li> <li><a href="#">BOATS<span class="dis-non">(ゴムボート)</span></a></li> <li><a href="#">ACCESSORY<span class="dis-non">(アクセサリー)</span></a></li> </ul> </div> <a href="#" target="_blank" class="dis-tblcl01"><span class="outlink">NEWS</span></a> <a href="shop/" class="dis-tblcl01">SHOP</a> <div class="dis-tblcl02"><span class="arrow-b">SUPPORT</span> <ul id="fade-in3"> <li><a href="#">FAQ(よくある質問)</a></li> <li><a href="#">製品の保証について</a></li> <li><a href="#">ユーザーマニュアル</a></li> </ul> </div> <div class="dis-tblcl03"> <a href="#" target="_blank"><span>Instagram</span></a> </div> </div><!-- /.dis-tbl_tab02 --> <p id="nav-btn_cl"></p> </nav> </div> </header> </body>
javascript
(function () { window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }; const target0 = document.getElementById('nav-btn'); const target1 = document.getElementById('nav-btn_cl'); const target2 = document.getElementById('nav-area'); const target3 = document.getElementById('page-top'); if (target0) { target0.addEventListener('click', function(){ target0.classList.toggle('close'); target1.classList.toggle('close'); target2.classList.toggle('slide-in'); target3.classList.toggle('noscroll'); }, false); } if (target1) { target1.addEventListener('click', function(){ target0.classList.toggle('close'); target1.classList.toggle('close'); target2.classList.toggle('slide-in'); target3.classList.toggle('noscroll'); }, false); } }());
css
.w1200 {max-width: 1200px;} a{color: #000; text-decoration: underline; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} a:hover {color: #ec1b23;} /* グローバルメニュー */ nav {background: #3d3d3d;} nav .dis-tbl_tab02 {padding:0 15px; font-family: Midashi Go MB31;} nav .dis-tblcl01 {vertical-align: middle;} nav .dis-tblcl02 { position: relative; padding:10px 0; color: #fff; font-size: 15px; text-align: center; vertical-align: middle;} nav a{ margin: 0; color: #fff; font-size: 15px; text-align: center; text-decoration: none; line-height: 1;} nav a:hover {color: #fff;} nav a.dis-tblcl01:hover {background:#ec1b23;} nav a.dis-tblcl03:hover {opacity: 0.75;} @media screen and (max-width:799px) and (min-width:700px){ nav .dis-tblcl02 {width: 110px;} } @media screen and (max-width: 699px){ nav {background: #fff;} nav .dis-tbl_tab02, nav .dis-tblcl01, nav .dis-tblcl02, nav .dis-tblcl03 {display: block; box-sizing: border-box; width: 100%; text-align: left;} nav a { display: block; padding: 15px 10px; border-bottom:solid #515859 1px; color: #515859; text-align:left;} nav a span.dis-non {display: inline;} nav .dis-tbl_tab02 {padding:15px;} nav .dis-tblcl02, nav .dis-tblcl03 {padding:0;} nav .dis-tblcl02 span {display:none;} nav .dis-tblcl02 span.dis-non {display: inline;} nav .dis-tblcl03 a { box-sizing: border-box; width: 100%; height:auto; background:none; text-indent:0;} nav .dis-tblcl03 span {position: relative; display: inline-block; padding:0 18px 0 0;} nav .dis-tblcl03 span:after { content: url("../images/gaibu_bk.png"); display: inline-block; position:absolute; top:50%; right:0; margin:-7px 0 0;} /**============================================================================================**/ /* javascriptを使用したハンバーガーボタン */ #nav-btn { display: block; position: absolute; top: 16px; right: 10px; z-index: 3; width: 28px; height: 28px; cursor: pointer;} #nav-btn.close { position: fixed; right: 300px; z-index: 10001; width: 100vw; height: 100vh;} #nav-btn::before, #nav-btn::after, #nav-btn span { content: ''; display: block; position: absolute; left: 0px; width: 28px; height: 4px; background: #e5f7fb;} #nav-btn::before {top: 0px;} #nav-btn::after {bottom: 0px;} #nav-btn span {top: 50%; margin: -2px 0 0;} #nav-btn.close::before, #nav-btn.close::after, #nav-btn.close span { display: none;} /* 閉じるボタン */ #nav-btn_cl { display: block; position: absolute; top: 18px; right: 10px; z-index: 10003; width: 28px; height: 28px; cursor: pointer;} #nav-btn_cl::before, #nav-btn_cl::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 28px; height: 4px; background: #1fc08e;} #nav-btn_cl::before { transform: translateX(-50%) translateY(-3px) rotate(45deg); -webkit-transform: translateX(-50%) translateY(-3px) rotate(45deg);} #nav-btn_cl::after { transform: translateX(-50%) translateY(-3px) rotate(-45deg); -webkit-transform: translateX(-50%) translateY(-3px) rotate(-45deg);} /* グローバルメニュー表示エリア */ #nav-area { position: fixed; top: 0; left: 0; z-index: 10000; width: 0vw; height: 100vh; background: rgba(0,0,0,0.00); transition: background 0.8s;} #nav-area.slide-in { width: 100vw; background: rgba(0,0,0,0.40); transition: background 0.8s;} #nav-area nav { position: fixed; top: 0; left: auto; right: 0; z-index: 10002; width: 300px; height: 100%; background: #fff; transform: translateX(100%); transition: 0.8s;} #nav-area.slide-in nav { transform: translateX(0); transition: 0.8s;} } @media screen and (max-width:499px){ #nav-btn.close {width: 0;} #nav-area nav { width: 100%;} }
試したこと
target0~3が数字なのでfor文を使ってtargetの数字の部分を変えようとしました。
また、.classList.toggleで使っているclass名を配列にして使う予定でした。
※そもそも書き方が間違っているかもしれません。ご容赦下さい。
javascript
const getId = ['nav-btn','nav-btn_cl','nav-area','page-top']; const byClass = ['close','close','slide-in','noscroll']; for (let number = 0; number <= 3; number ++) { const target(number) = document.getElementById(getId[number]); } for (let number1 = 0; number <= 3; number ++) { if (target0) { target0.addEventListener('click', function(){ target(number1).classList.toggle(byClass[number1]); }, false); } if (target1) { target1.addEventListener('click', function(){ target(number1).classList.toggle(byClass[number1]); }, false); } }
まだ回答がついていません
会員登録して回答してみよう