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

Question

CSS、HTML、jqueryを使用して水平メニューを作成しました。メニュー項目をクリックすると、サブメニューが表示されます。

私の問題は、サブメニューがすでに開いているときに別のメニュー項目をクリックすると、新しいサブメニューが表示されますが、以前に開いていたメニューは非表示にならないことです。

更新: 質問を編集して、現在は 1 つの問題だけに焦点を当てています。

$(".menus_li").click(関数(e) {
  $(".blocks_ul", this).toggleClass('submenu-is-active');
});

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 {
  表示ブロック;
}

<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bg_submenu"></div>
<ul class="トップメニュー">
  <li class="menus_li"><a href="#">車 </a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">メルセデス</a></li>
      <li><a class="menu-link" href="#">ジープ</a></li>
      <li><a class="menu-link" href="#">フォード</a></li>
      <li><a class="menu-link" href="#">BMW</a></li>
      <li><a class="menu-link" href="#">テスラ</a></li>
    </ul>
  </li>
  <li class="menus_li"><a href="#">コンピュータ </a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Apple</a></li>
      <li><a class="menu-link" href="#">Lenovo</a></li>
      <li><a class="menu-link" href="#">HP</a></li>
      <li><a class="menu-link" href="#">デル</a></li>
      <li><a class="menu-link" href="#">Acer</a></li>
    </ul>
  </li>
</ul>

Answer 1

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

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 {
  表示ブロック;
}

  ＃＃＃＃＃＃車  ＃＃＃
    

      メルセデス

      ＃＃＃＃＃＃ジープ＃＃＃＃＃＃
      ＃＃＃＃＃＃フォード＃＃＃＃＃＃
      ＃＃＃＃＃＃BMW＃＃＃＃＃＃
      テスラ

    
  
  
コンピュータ 
    
      ＃＃＃＃＃＃りんご＃＃＃＃＃＃
      
レノボ
      
HP
      
デル

      エイサー