Q&A
アコーディオンの定義をしてください
特定のメニューで他のメニューが閉じる必要はあるのか重要です
またSCSSはできれば通常のCSSでやるほうがバグの切り分けがしやすいでしょう
前提・実現したいこと
Javascriptでアコーディオンを実装したい
以下サイトの例を参考にアコーディオンの作成をしているのですが、なぜかうまくいきません。
https://flex-box.net/js-accordion/#co-index-10
追記
※アコーディオン は、<H4 class="js_accordion_title">をクリックすると、.accordion_contentが開く。
再度、js_accordion_titleをクリックすると開いている.accordion_contentが閉じる というものです。
このままでは開きもしませんし、閉じもしません。
発生している問題・エラーメッセージ
エラーメッセージはありません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>ninjacode</title> 8 <script 9 src="https://code.jquery.com/jquery-3.4.1.js" 10 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 11 crossorigin="anonymous"></script> 12</head> 13<body> 14 <section class="accordion"> 15 <div class="accordion_container"> 16 <h4 class="accordion_title js_accordion_title">Accordion Title1</h4> 17 <div class="accordion_content"> 18 Accordion Content 1 19 </div> 20 <h4 class="accordion_title js_accordion_title">Accordion Title2</h4> 21 <div class="accordion_content"> 22 Accordion Content 2 23 </div> 24 <h4 class="accordion_title js_accordion_title">Accordion Title3</h4> 25 <div class="accordion_content"> 26 Accordion Content 3 27 </div> 28 </div> 29 </section> 30 <script type="text/javascript" src="sample.js"></script> 31</body> 32</html>
CSS
1@charset "UTF-8"; 2 3＊{ 4 margin: 0; 5 padding: 0; 6 } 7 8 .accordion{ 9 margin-top: 10px; 10 } 11 12 .accordion_container { 13 width: 300px; 14 margin: 0 auto; 15 } 16 17 .accordion_title { 18 background-color: #000; 19 border: 1px solid transparent; 20 color: #fff; 21 font-size: 1.25em; 22 padding: .625em .625em .625em 2em; 23 position: relative; 24 cursor: pointer; 25 user-select: none; 26 } 27 28 .accordion_title::before, .accordion_title::after { 29 content: ''; 30 display: block; 31 background-color: #fff; 32 position: absolute; 33 top: 50%; 34 width: 15px; 35 height: 2px; 36 right: 25px; 37 } 38 39 .accordion_title::after { 40 transform: rotate(90deg); 41 transition-duration: .3s; 42 } 43 44 .accordion_title:hover, 45 .accordion_title:active, 46 .accordion_title.is-active { 47 background-color: #00aaa7; 48 } 49 50 .accordion_title.is-active::before { 51 opacity: 0; 52 } 53 54 .accordion_title.is-active::after { 55 transform: rotate(0); 56 } 57 58 .accordion_content { 59 border-left: 1px solid transparent; 60 border-right: 1px solid transparent; 61 padding: 0 1.5em; 62 line-height: 0; 63 height: 0; 64 overflow: hidden; 65 opacity: 0; 66 transition-duration: .3s; 67 } 68 69 .accordion_content.is-open { 70 border: 1px solid #00aaa7; 71 padding: .625em 1.5em; 72 line-height: normal; /* numberに書き換える*/ 73 height: auto; 74 opacity: 1; 75 }
javascript
1 2 document.addEventListener("DOMContentLoaded",() => { 3 const title = document.querySelectorAll('.js-accordion-title'); 4 5 for (let i = 0; i < title.length; i++){ 6 let titleEach = title[i]; 7 let content = titleEach.nextElementSibling; 8 titleEach.addEventListener('click', () => { 9 titleEach.classList.toggle('is-active'); 10 content.classList.toggle('is-open'); 11 }); 12 } 13 14 }); 15
試したこと
Javascript,HTMLのスペルミスはないと思っています。（サイトのコードをコピペしましたが、機能しませんでした。）
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
とりあえずh4につけたクラスは「js_accordion_title」で
jsで参照しているのは「'.js-accordion-title'」なので
ハイフンとアンダースコアの違いがあります
投稿2020/11/17 04:29
総合スコア116724
「スペルミスはない」と思い込むのが一番危険です
参考までに
<script>
document.addEventListener("DOMContentLoaded",() => {
document.querySelectorAll('.js_accordion_title').forEach(titleEach=>{
let content = titleEach.nextElementSibling;
titleEach.addEventListener('click', () => {
titleEach.classList.toggle('is-active');
content.classList.toggle('is-open');
});
});
});
</script>
<style>
.accordion_content{display:none}
.accordion_content.is-open{display:block}
</style>
<section class="accordion">
<div class="accordion_container">
<h4 class="accordion_title js_accordion_title">Accordion Title1</h4>
<div class="accordion_content">
Accordion Content 1
</div>
<h4 class="accordion_title js_accordion_title">Accordion Title2</h4>
<div class="accordion_content">
Accordion Content 2
</div>
<h4 class="accordion_title js_accordion_title">Accordion Title3</h4>
<div class="accordion_content">
Accordion Content 3
</div>
</div>
</section>
動きました。申し訳ありません。ありがとうございます。
参考もありがとうございます。
あなたの回答
tips
プレビュー
