お世話になります。javascript初心者です。
現在、jqueryで書いた物を、勉強のためjavascriptで書いているところです。
やりたいこと
・javascriptでアコーディオンを実装したい
・その際、アコーディオンは複数あるので、idではなく該当classをクリックしたら、
その隣の要素を出現させたい。
・最終的には要素の出し方はslidedown/upさせたいが、
そもそもトリガーをクリックしてもalert処理さえ実装できていないので、
まずはalertを出したい。
参考サイト
https://memocarilog.info/jquery/7300
→こちらのサイトの通りidで作成すると、「cloneNode」のエラーはでず、きちんと動きます。
ただし今回のようにclassで処理をすると「cloneNode」のエラーが発生してしまい
それ以降の処理が動きません。
###HTML
html
1 <ul class="c-header-gnavi__list"> 2 <li class="c-header-gnavi__item js-accordion-box"> 3 <span class="c-header-gnavi__link js-accordion-trigger"><span class="c-header-gnavi__link-inner">アコーディオントリガー</span></span> 4 <ul class="sp js-accordion-items"> 5 <li class="c-mega-navi__item"><a href="">アコーディオン子要素1</a></li> 6 <li class="c-mega-navi__item"><a href="">アコーディオン子要素2</a></li> 7 <li class="c-mega-navi__item"><a href="">アコーディオン子要素3</a></li> 8 </ul> 9 </li> 10 <li class="c-header-gnavi__item"> 11 <span class="c-header-gnavi__link js-accordion-trigger"><span class="c-header-gnavi__link-inner">アコーディオントリガー2</span></span> 12 <ul class="sp js-accordion-items"> 13 <li class="c-mega-navi__item"><a href="">アコーディオン子要素素1</a></li> 14 <li class="c-mega-navi__item"><a href="">アコーディオン子要素2</a></li> 15 <li class="c-mega-navi__item"><a href="">アコーディオン子要素3</a></li> 16 </ul> 17 </li> 18 </ul>
javascript(エラーがでる)
※一旦スライドダウン・アップの処理は置いておいて、まずは('.js-accordion-trigger')をクリックしたらアラートが出るようにしたいです。(ただし、最終的にはクリックしたら、スライドダウン+アップ処理をする前提で記述したいです)
javascript
1window.onload = function() { 2 const accrodionTrigger = document.getElementsByClassName('js-accordion-trigger'); 3 const accrodionItems = document.getElementsByClassName('js-accordion-items'); 4 5 for (let i = 0;i < accrodionTrigger.length;i++) { 6 const accrodionItemsCopy = accrodionTrigger.nextElementSibling.cloneNode(true); 7 accrodionItems.parentNode.appendChild(accrodionItemsCopy); 8 const accrodionItemsCopyH = accrodionItemsCopy.offsetHeight; 9 accrodionTrigger[i].addEventListener('click',() => { 10 alert(accrodionItemsCopyH); 11 }); 12 } 13}
試したこと
①cloneNodeのタイミングや、書き方を変えてみました。
例えば、
const accrodionItemsCopy = this.nextElementSibling.cloneNode(true);
→const accrodionItemsCopy = accrodionTrigger.cloneNode(true);
②for文の外に書いてみる。
エラー内容
Cannot read property 'cloneNode' of undefined at window.onload
引き続き調べを進めますが、
何かヒントなどいただければ嬉しいです。
回答1件
あなたの回答
tips
プレビュー