使用 jquery 显示/隐藏（切换）导航菜单的子菜单无法按预期工作

Question

我使用CSS、HTML和jquery创建了一个水平菜单。当有人单击菜单项时，它会显示一个子菜单。我的问题是，当子菜单已打开并且我单击另一个菜单项时，它会显示新的子菜单，但不会隐藏已打开的上一个菜单。更新：我编辑了该问题，因此现在仅关注一个问题。$(".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;
}

sssccc