在容器外部单击时隐藏展开的菜单:如何使用代码片段

<div class="menu">
  <button class="menu-button">菜单</button>
  <ul class="menu-list">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

.menu-list {
  display: none;
}

.menu-button:focus + .menu-list,
.menu-list:focus-within {
  display: block;
}

const menuButton = document.querySelector('.menu-button');
const menuList = document.querySelector('.menu-list');

menuButton.addEventListener('click', () => {
  menuList.style.display = (menuList.style.display === 'block') ? 'none' : 'block';
});