タイトルの書き換え: ドロップダウンの切り替えは最初の値の選択に限定されます

Question

正常に切り替わるドロップダウンを作成しましたが、最初のクラスのみが選択されているようで、2 番目のドロップダウンをクリックすると、最初のドロップダウンの内容が切り替わります。ここで何かが足りないのでしょうか？これは私のコードです:

リーリー リーリー リーリー

Answer 1

問題は、ドロップダウンを 1 つだけ選択したことです。したがって、クリックしたメニュー リンクに関連付けられたドロップダウンを選択する必要があります。

JS

に加えた変更については以下を参照してください。

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');

// 必要ありません
// const menuBlock = document.querySelector('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    // ターゲットリスト内のブロックを選択します
    const menuBlock = menuBlockList.querySelector(".menu-block");
    menuBlock.classList.toggle('menu-block-active');
  })
})

.メニューブロック {
  背景: #fff;
  ボックスシャドウ: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  パディング: 15px;
  境界半径: 8px;
  位置: 絶対;
  上: 35ピクセル;
  不透明度: 0;
  トランジション: 150ms の容易さ。
}

.menu-block-active {
  遷移: すべて 150 ミリ秒。
  不透明度: 1;
}

.menu-block-list {
  ディスプレイ: フレックス;
  フレックス方向: 列;
  ギャップ: 15px;
}

.menu-block-list a {
  色: #444444;
  マージン: 0 0 0.25 0;
  パディング: 0;
  フォントの太さ: 500;
}

リ {
  表示: インラインブロック;
}

＃＃＃リソース＃＃＃

ドロップダウン 1

ドロップダウン 2

ブログ

ドロップダウン 3

ドロップダウン 4