当我退出时关闭 <div>

Question

我有一个带有列表的面板，单击按钮即可打开：

<button id="menuButton">Menu</button>
<div id="menuPanel">
    <ul>
        <li>Name</li>
        <li>Role</li>
        <li>Profile</li>
        <li>Management</li>
    </ul>
</div>

按钮点击使用 JavaScript 添加一个 CSS 类来显示它。对于键盘用户，我希望能够在他们通过 .

JavaScript：

(function ready(fn) {
    if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);

        let panel = document.getElementById('menuPanel'),
            button = document.getElementById('menuButton');

        button.onclick = checkPanelOn;

        function checkPanelOn(e) {

            e.preventDefault();
            if (panel.classList.contains('on')) {
                panel.classList.remove('on');
            } else {
                panel.classList.add('on');
            }
        }
    }
}());

我正在寻找一个纯 JavaScript 解决方案（抱歉，不能在这个项目上使用 jQuery），但我正在努力寻找答案。你有什么建议吗？

Answer 1

这是一种使用 tabindex 和 focusout 的方法：

let panel = document.getElementById('menuPanel'),
  button = document.getElementById('menuButton');

button.onclick = checkPanelOn;

panel.addEventListener('focusout', function(event) {
  if (panel.contains(event.relatedTarget)) {
    return;
  }
  checkPanelOn(event);
});

function checkPanelOn(e) {

  e.preventDefault();
  if (panel.classList.contains('on')) {
    panel.classList.remove('on');
  } else {
    panel.classList.add('on');
  }
}

.on {
  display: none;
}

<button id="menuButton">Menu</button>
<div id="menuPanel">
  <ul>
    <li tabindex="0">Name</li>
    <li tabindex="0">Role</li>
    <li tabindex="0">Profile</li>
    <li tabindex="0">Management</li>
  </ul>
</div>
<button>Outside button</button>

JSFiddle : https://jsfiddle.net/nzmtL1od/