Show/hide (toggle) submenu of navigation menu using jquery not working as expected

Question

I've created a horizontal menu using CSS, HTML and jquery. When someone clicks on a menu item, it displays a submenu. My problem is that when the submenu is already open and I click on another menu item, it shows the new submenu but does not hide the previous menu that was opened. Update: I edited the question so it only focuses on one issue now. $(".menus_li").click(function(e){$(".blocks_ul",this).togg

P粉663883862 · Answer

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

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