toggle での開閉がうまくいきません

toggle と forEach の関係を詳しく説明していきます。
2021年7月27日
ユーザー

お世話になっております。

試しに、dtdd を囲うdiv を付けずに実行してみたところ、開閉がうまくいきませんでした。

該当部分のHTMLは

<dl>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    <dt>質問です</dt>
    <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</dl>

該当部分のCSSは

dd {
  display: none;
}

dd.appear {
  display: block;
}

JavaScriptは下記です。

const dts = document.querySelectorAll('dt');
const dds = document.querySelectorAll('dd');

dts.forEach((dt, index) => {
  dt.addEventListener('click', () => {
    dds.forEach(dd => {
      dd.classList.remove('appear');
    })
    dds[index].classList.add('appear');
  })
})

です。

JavaScriptの流れから考えると、

const dts = document.querySelectorAll('dt');
const dds = document.querySelectorAll('dd');

dts.forEach((dt, index) => {
  dt.addEventListener('click', () => {   // (1) dtをクリックしたら
    dds.forEach(dd => {                 // (2) 全てのddのappearを削除して
      dd.classList.remove('appear');
    })
    dds[index].classList.toggle('appear');   // (3) 該当のddにappearを付ける
  })
})

だと思うのですが、なぜ、(2)が適用されないのか、別のdtをクリックした時、ddappearがついたままになってしまう流れが分かりません。

お手数ですが、宜しくお願い致します。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?