Javascript切换菜单意外显示

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

当我想再次隐藏菜单时，问题就开始了 - 当我通过单击页面隐藏它时，没关系。但是，当我想通过单击黄色按钮隐藏它时，它会隐藏，但在单击普通文本后它会再次显示。我不知道原因，但这肯定是我不想要的。

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

这是我的整个代码： https://jsfiddle.net/tu958pwg/

提前感谢您的任何建议，并为我的英语不好感到抱歉。

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

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

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

这是因为当您单击menu按钮一次(显示下拉列表(然后再次单击(隐藏下拉列表(时，menu按钮仍然具有焦点。因此，当您单击"普通文本"(或窗口中的其他任何位置(并且menu失去焦点时，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)
  }
}

并确保从button中删除onfocusout="zobrazSkryVseobecne('hidden')"。

相关内容

最新更新

热门标签：