実現したいこと
親カテゴリーをクリックすると、直下に子カテゴリーを表示させたい。
クリックで展開→他箇所クリックで元開いていた展開を閉じ、該当箇所の子カテが展開と挙動を実現したいです。
発生している問題・分からないこと
１回目のクリックで展開はするのですが、再度クリックすると展開しなくなってしまいます。
エラーメッセージ
error
1エラーメッセージの出し方がわからなかったです。。
該当のソースコード
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 <title>画像リスト</title> 7 <style> 8 .container { 9 display: flex; 10 flex-direction: column; 11 gap: 10px; 12 } 13 .row { 14 display: flex; 15 gap: 10px; 16 position: relative; 17 } 18 .item, .sub-category { 19 width: 100px; 20 height: 100px; 21 display: flex; 22 align-items: center; 23 justify-content: center; 24 background-color: lightgray; 25 cursor: pointer; 26 } 27 .item.selected { 28 background-color: red; 29 } 30 .sub-category { 31 background-color: yellow; 32 display: none; 33 } 34 </style> 35</head> 36<body> 37 <div class="container"> 38 <div class="row"> 39 <div class="item" data-index="1"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocyanPAKE4516-433_TP_V.jpg" width="100%"></div> 40 <div class="item" data-index="2"><img src="https://user0514.cdnw.net/shared/img/thumb/nyankoIMG_7270_TP_V.jpg" width="100%"></div> 41 <div class="item" data-index="3"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocyanPAKE4699-452_TP_V.jpg" width="100%"></div> 42 <div class="item" data-index="4"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocyanPAKE5048-469_TP_V.jpg" width="100%"></div> 43 </div> 44 <div class="row sub-row" data-parent="1"></div> 45 <div class="row"> 46 <div class="item" data-index="5"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocatPAR587322421_TP_V.jpg" width="100%"></div> 47 <div class="item" data-index="6"><img src="https://user0514.cdnw.net/shared/img/thumb/susipaku211-app90994_TP_V.jpg" width="100%"></div> 48 <div class="item" data-index="7"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocyan458A3782_TP_V.jpg" width="100%"></div> 49 <div class="item" data-index="8"><img src="https://user0514.cdnw.net/shared/img/thumb/cat458A7538_TP_V.jpg" width="100%"></div> 50 </div> 51 <div class="row sub-row" data-parent="2"></div> 52 <div class="row"> 53 <div class="item" data-index="9"><img src="https://user0514.cdnw.net/shared/img/thumb/nekocyan458A6771_TP_V.jpg" width="100%"></div> 54 <div class="item" data-index="10"><img src="https://user0514.cdnw.net/shared/img/thumb/tomcat1560_TP_V.jpg" width="100%"></div> 55 <div class="item" data-index="11"><img src="https://user0514.cdnw.net/shared/img/thumb/TOMS526529_TP_V.jpg" width="100%"></div> 56 <div class="item" data-index="12"><img src="https://user0514.cdnw.net/shared/img/thumb/SnekoDSC03810_TP_V.jpg" width="100%"></div> 57 </div> 58 <div class="row sub-row" data-parent="3"></div> 59 <!-- サブカテゴリー要素 --> 60 <div class="sub-category" data-index="1-1"><img src="https://user0514.cdnw.net/shared/img/thumb/PAR54934_TP_V.jpg" width="100%"></div> 61 <div class="sub-category" data-index="2-1"><img src="https://user0514.cdnw.net/shared/img/thumb/PAR54920_TP_V.jpg" width="100%"></div> 62 <div class="sub-category" data-index="2-2"><img src="https://user0514.cdnw.net/shared/img/thumb/samuraiPAR500132730_TP_V.jpg" width="100%"></div> 63 <div class="sub-category" data-index="2-3"><img src="https://user0514.cdnw.net/shared/img/thumb/PAR51023_TP_V.jpg" width="100%"></div> 64 <div class="sub-category" data-index="6-1"><img src="https://user0514.cdnw.net/shared/img/thumb/acboostIMGL4616_TP_V.jpg" width="100%"></div> 65 <div class="sub-category" data-index="6-2"><img src="https://user0514.cdnw.net/shared/img/thumb/PAKssss0I9A3751_TP_V.jpg" width="100%"></div> 66 <div class="sub-category" data-index="7-1"><img src="https://user0514.cdnw.net/shared/img/thumb/medama458A9908_TP_V.jpg" width="100%"></div> 67 </div> 68 69 <script> 70 document.querySelectorAll('.item').forEach(item => { 71 item.addEventListener('click', function() { 72 const isSelected = this.classList.contains('selected'); 73 74 // すべての選択状態をリセット 75 document.querySelectorAll('.item').forEach(i => i.classList.remove('selected')); 76 document.querySelectorAll('.sub-category').forEach(sub => sub.style.display = 'none'); 77 document.querySelectorAll('.sub-row').forEach(row => row.innerHTML = ''); 78 79 if (!isSelected) { 80 // クリックしたアイテムを選択状態に 81 this.classList.add('selected'); 82 83 // サブカテゴリーを表示 84 const index = this.dataset.index; 85 const subCategories = document.querySelectorAll(`.sub-category[data-index^="${index}-"]`); 86 const subRow = document.querySelector(`.sub-row[data-parent="${Math.ceil(index / 4)}"]`); 87 subCategories.forEach(sub => { 88 sub.style.display = 'flex'; 89 subRow.appendChild(sub); 90 }); 91 } 92 }); 93 }); 94 </script> 95</body> 96</html> 97
試したこと・調べたこと
上記の詳細・結果
chatGPTに聞きながら色々試してみたのですがお手上げ状態のため助けていただけますと幸いです。
補足
お手上げ状態のため助けていただけますと幸いです。
0 コメント