Das Ein-/Ausblenden (Umschalten) von Untermenüs des Navigationsmenüs mithilfe von JQuery funktioniert nicht wie erwartet

Question

Ich habe ein horizontales Menü mit CSS, HTML und JQuery erstellt. Wenn jemand auf einen Menüpunkt klickt, wird ein Untermenü angezeigt.

Mein Problem ist, dass, wenn das Untermenü bereits geöffnet ist und ich auf einen anderen Menüpunkt klicke, das neue Untermenü angezeigt wird, das zuvor geöffnete Menü jedoch nicht ausgeblendet wird.

Update: Ich habe die Frage so bearbeitet, dass sie sich jetzt nur noch auf ein Problem konzentriert.

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

a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

.top-menu {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  width: 100%;
  background: #0088ff;
  padding: 1rem;
  margin: 0;
}

.menus_li {
  font-weight: bold;
  margin-left: 1rem;
}

.blocks_ul {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  min-width: 120px;
  border-radius: 8px;
  padding: 1rem;
}

.blocks_ul a {
  color: #000;
}

.blocks_ul li {
  padding-left: 10px;
  font-weight: normal;
  padding: 0.4rem 0.7rem;
}

.blocks_ul.submenu-is-active {
  display: block;
}

.bg_submenu {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.bg_submenu.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bg_submenu"></div>
<ul class="top-menu">
  <li class="menus_li"><a href="#">Cars +</a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Mercedes</a></li>
      <li><a class="menu-link" href="#">Jeep</a></li>
      <li><a class="menu-link" href="#">Ford</a></li>
      <li><a class="menu-link" href="#">BMW</a></li>
      <li><a class="menu-link" href="#">Tesla</a></li>
    </ul>
  </li>
  <li class="menus_li"><a href="#">Computers +</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="#">Dell</a></li>
      <li><a class="menu-link" href="#">Acer</a></li>
    </ul>
  </li>
</ul>

Answer 1

您可以按如下方式更改代码（代码中的注释）

const $blocks = $(".blocks_ul");       // get all blocks
const $background = $(".bg_submenu");  // get background

$(".menus_li").on('click', e => {
  const $thisBlock = $(".blocks_ul", e.currentTarget);      // get current block

  $blocks.not($thisBlock).removeClass('submenu-is-active'); // remove class from other blocks
  $thisBlock.toggleClass('submenu-is-active');              // toggle the class on the current block
  $background.toggleClass('show', $thisBlock.hasClass('submenu-is-active')); // only show the background if you are showing the block
});

$('body').on('click', e => {
  const $clicked = $(e.target);  // get the target that was clicked
  
  // check if the click originated in the menu
  if (!$clicked.hasClass('menus_li') && !$clicked.closest('.menus_li').length) {
    // if not do the following
    $blocks.removeClass('submenu-is-active'); // hide menu
    $background.removeClass('show'); // hide background
  }
})

a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

.top-menu {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  width: 100%;
  background: #0088ff;
  padding: 1rem;
  margin: 0;
}

.menus_li {
  font-weight: bold;
  margin-left: 1rem;
}

.blocks_ul {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  min-width: 120px;
  border-radius: 8px;
  padding: 1rem;
}

.blocks_ul a {
  color: #000;
}

.blocks_ul li {
  padding-left: 10px;
  font-weight: normal;
  padding: 0.4rem 0.7rem;
}

.blocks_ul.submenu-is-active {
  display: block;
}

.bg_submenu {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.bg_submenu.show {
  display: block;
}

• Cars +
  • Mercedes
  • Jeep
  • Ford
  • BMW
  • Tesla
• Computers +
  • Apple
  • Lenovo
  • HP
  • Dell
  • Acer