jqueryを使用したナビゲーションメニューのサブメニューの表示/非表示（切り替え）が期待どおりに機能しない

Question

CSS、HTML、jqueryを使用して水平メニューを作成しました。メニュー項目をクリックすると、サブメニューが表示されます。私の問題は、サブメニューがすでに開いているときに別のメニュー項目をクリックすると、新しいサブメニューが表示されますが、以前に開いていたメニューは非表示にならないことです。更新: 質問を編集して、現在は 1 つの問題だけに焦点を当てています。 $(".menus_li").click(function(e){$(".blocks_ul",this).togg

P粉663883862 · Answer

次のようにコードを変更できます(コード内の注釈)

const $blocks = $(".blocks_ul"); // すべてのブロックを取得します
const $background = $(".bg_submenu"); // 背景を取得する

$(".menus_li").on('クリック', e => {
  const $thisBlock = $(".blocks_ul", e.currentTarget); // 現在のブロックを取得する

  $blocks.not($thisBlock).removeClass('サブメニューはアクティブ'); // 他のブロックからクラスを削除します
  $thisBlock.toggleClass('サブメニューがアクティブ'); // 現在のブロックのクラスを切り替えます
  $background.toggleClass('show', $thisBlock.hasClass('submenu-is-active')); // ブロックを表示している場合は背景のみを表示します
});

$('body').on('click', e => {
  const $clicked = $(e.target); // クリックされたターゲットを取得します
  
  // クリックがメニューから発生したかどうかを確認します
  if (!$clicked.hasClass('menus_li') && !$clicked.closest('.menus_li').length) {
    // そうでない場合は以下を実行します
    $blocks.removeClass('サブメニューがアクティブ'); // メニューを非表示にする
    $background.removeClass('show'); // 背景を隠す
  }
})

a {
  色: #fff;
  テキスト装飾: なし。
}

リ {
  リストスタイル: なし;
}

。トップメニュー {
  z インデックス: 2;
  位置: 固定;
  トップ: 0;
  左: 0;
  幅: 100%;
  ディスプレイ: フレックス;
  幅: 100%;
  背景: #0088ff;
  パディング: 1レム;
  マージン: 0;
}

.menus_li {
  フォントの太さ: 太字;
  マージン左: 1rem;
}

.blocks_ul {
  表示: なし。
  位置: 絶対;
  背景: #fff;
  上: 100%;
  最小幅: 120ピクセル;
  境界半径: 8px;
  パディング: 1レム;
}

.blocks_ul a {
  色: #000;
}

.blocks_ul li {
  パディング左: 10px;
  フォントの太さ: 通常;
  パディング: 0.4rem 0.7rem;
}

.blocks_ul.submenu-is-active {
  表示ブロック;
}

.bg_submenu {
  背景色: rgba(0, 0, 0, 0.6);
  位置: 固定;
  トップ: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  z インデックス: 1;
  表示: なし。
}

.bg_submenu.show {
  表示ブロック;
}