Tunjukkan/sembunyikan (togol) submenu menu navigasi menggunakan jquery tidak berfungsi seperti yang diharapkan

Question

Saya mencipta menu mendatar menggunakan CSS, HTML dan jquery. Apabila seseorang mengklik pada item menu, ia memaparkan submenu.

Masalah saya ialah apabila submenu sudah dibuka dan saya klik pada item menu lain, ia menunjukkan submenu baru tetapi tidak menyembunyikan menu sebelumnya yang dibuka.

Kemas kini: Saya menyunting soalan supaya ia hanya memfokuskan pada satu isu sekarang.

$(".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

Anda boleh menukar kod seperti berikut (komen dalam kod)

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;
}

sssccc

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