Javascript 如何显示隐藏/显示菜单（onblur/onfocus）

我希望只有在按下用户图标时才有第二个菜单（见图）。我设法设置了一个显示“Block”和“display:None”。但是，当我按下第二个菜单项时，该菜单消失

如何保持菜单的焦点

---

您可以在顶级菜单中添加一个“单击”事件侦听器，用于切换布尔值true或false。如果为true，则将“显示：块”样式添加到子菜单，如果为false，则将“显示：无”值添加到子菜单

index.html

<div>
  <button id='toggle-menu'>Menu</button>
  <div id='sub-menu'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
  </div>
</div>

---

此处代码打开：

不要使用焦点/模糊。使用“单击”显示/隐藏。如果用户单击其中一个菜单项，它们将被重定向，并且菜单将被重置。如果目标不是按钮，您可以在正文中添加单击事件以关闭菜单。嘿，谢谢您的回答。菜单显示良好，隐藏良好。但是，如果我在菜单外单击，它将保持显示状态。如何将onblur集成到脚本中？没问题。您可以尝试使用“mouseleave”事件侦听器。我已在此处更新了代码笔：。我在外部容器中添加了一个id（假设这是完整的导航栏），当鼠标离开时，display:none被添加到子菜单中

<div>
  <button id='toggle-menu'>Menu</button>
  <div id='sub-menu'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
  </div>
</div>

const toggleMenu = document.getElementById('toggle-menu');
const subMenu = document.getElementById('sub-menu');

let showSubMenu = false;

toggleMenu.addEventListener('click', () => {
  showSubMenu = !showSubMenu
  if (showSubMenu === true) {
    subMenu.style.display = 'none'
  } else {
    subMenu.style.display = 'block'
  }
})