@createwebsite22 (Taka 西川)posted at 2025-01-01

<input> タグを作ってアコーディオンを実装したがうまく開かなくなった原因を知りたい

Q&A

HTML5 input アコーディオンアコーディオンメニューアコーディオンパネル

１．実現したいこと

こちらのページに3つタグで実装されたアコーディオンがあります。

① 体験
② 基礎講座
③ 集中レッスン

それぞれ「詳細」をクリックするとアコーディオンが開く設定にしたいです。

２．発生している問題

② 基礎講座
のアコーディオンだけが開てくれません。
① 体験
にカーソルが持っていかれます。

３．該当のソースコード

① 体験【278行目】

<input id="training_menu01" type="checkbox" name="navinput">
<label class="menu_navi01" for="training_menu01">詳細</label>

② 基礎講座【339行目】

<input id="training_menu01" type="checkbox" name="navinput">
<label class="menu_navi01" for="training_menu01">詳細</label>

③ 集中レッスン【410行目】

<input id="training_menu02" type="checkbox" name="navinput">
<label class="menu_navi02" for="training_menu02">詳細</label>

４．試してみたこと

② 基礎講座【339行目】

この箇所のidが重複しているので、以下のように変更しました。

「番号を01から03に変更」

<input id="training_menu03" type="checkbox" name="navinput">
<label class="menu_navi01" for="training_menu03">詳細</label>

カーソルは飛ばなくなりましたが、アコーディオンは開きません。

1Answer

@Verclene posted at 2025-01-01

はじめに指摘しておきますが,納品物を提示して「うまく動かないから直してくれ」というのはデバッグ作業を依頼するのと変わらないので,本来金銭が発生する行為であることに留意してください.

ナレッジベースとしてコミュニティを成立させるには,問題が発生する最小限のコードを特定することが重要です.これはバグの原因を突き止める訓練にもなります.

軽く見た感じでは,アコーディオンのセレクタが

#training_menu01:checked ~ .box01, #training_menu02:checked ~ .box02

というようになっているので,ここの対応がきちんと指定されていないと想定通りに動作しません.
今回は特定の要素をクリックすることで1つのボックスが開くようにしたいので,チェックボックスとアコーディオンはそれぞれIDを指定して,その分だけセレクタを追記するほうがよさそうです.(当然ながら,DOM中のID重複は許されていないので,徹底的に排除するようにしてください)

0Like

Are you sure you want to delete the question?