javascript - 使用 JavaScript 显示另一个 div 时隐藏一个 div

Question

我正在尝试创建一个点击时带有“弹出式”子菜单的菜单。

有三个独立的子菜单，我可以用 Javascript 显示它们，只是它们相互堆叠。如何在单击下一个时隐藏之前显示的 div？

我可以使用纯 CSS 来实现吗？

查看此 pen更多细节。

Answer 1

您需要记住打开的是哪个。为您的 javascript 函数试试这个:

var current = null;
function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (current !== null) {
    current.style.display = 'none';
  }
  if (e == current) {
    return;
  }
  if (e.style.display == 'block') {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
    current = e;
  }
}