JavaScript 切换菜单出现意外情况

Question

我有一个默认隐藏的菜单，应该在点击按钮后显示 - 没有问题。

问题开始出现在当我想要隐藏菜单时 - 当我通过点击页面上其他地方来隐藏它时，没问题。然而，当我想通过点击黄色按钮来隐藏它时，它会被隐藏，但是在点击普通文本后，它又重新显示了。我不知道原因，但这肯定不是我想要的。

function zobrazSkryVseobecne(idecko) {
    var miesto = document.getElementById(idecko);
    miesto.className = (miesto.className === "skryt" ? "" : "skryt");
}

以下是我的完整代码：https://jsfiddle.net/tu958pwg/

非常感谢您提供的任何建议，对于我的英语不好表示抱歉。

- user12417405

---

我看不到黄色按钮。 - Richard Fazzi

抱歉，现在它是黄色的 链接。 - user12417405

你的 jsfiddle 也不起作用，因为 jsfiddle 会将你的代码包装在 onload 函数中。看看这个是否有帮助：https://dev59.com/l2035IYBdhLWcg3wW-v0 - sallf

Answer 1

好的，我发现问题在于onfocusout事件。我认为主要问题是您在不允许使用该事件的元素中使用了它 请查看this关于onfocusout事件和可以使用它的元素的信息。

我知道这不是一个解决方案，而是一个指导，让您自己思考解决方案。

如果我能以其他方式帮助您，请告诉我。

- Richard Fazzi

Answer 2

这是因为当您单击一次“菜单”按钮（显示下拉菜单），再次单击（隐藏下拉菜单）时，“菜单”按钮仍然具有焦点。因此，当您单击“普通文本”（或窗口中的任何其他位置）并且“菜单”失去焦点时，“onfocusout”会触发，从而显示下拉菜单。

更好的方法可能是添加并清除“onfocusout”的事件监听器：

function hideElem() {
  var miesto = document.getElementById('hidden');
  miesto.className = 'skryt';
}


function zobrazSkryVseobecne(idecko) {
  var miesto = document.getElementById(idecko);
  var menu = document.getElementById('menu');
  // If hidden
  if (miesto.className === 'skryt') {
    miesto.className = '';
    menu.addEventListener('focusout', hideElem)
  // Else if shown
  } else {
    miesto.className = 'skryt';
    menu.removeEventListener('focusout', hideElem)
  }
}

请确保从您的中删除onfocusout="zobrazSkryVseobecne('hidden')"。

- sallf