时间戳

首页 > 解决方案 > 单击时隐藏菜单部分

javascript - 单击时隐藏菜单部分

问题描述

单击菜单时，仅应看到第 1 节和第 2 节

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p id="menu" onclick="menu()">menu</p>
  <p id="section1" onclick="section1()">section1</p>
  <p id="building1">building1</p>
  <p id="building2">building2</p>
  <p id="section2">section2</p>

  <script>
    menu.style.display = "block";
    building1.style.display = "none";
    building2.style.display = "none";
    section2.style.display = "none";
    section1.style.display = "none";

    function menu() {
      menu.style.display = "none";
      building1.style.display = "none";
      building2.style.display = "none";
      section2.style.display = "block";
      section1.style.display = "block";
    }
  </script>

</body>
</html>

标签： javascripthtml

解决方案

你不能做这样的事情：menu.style.display = "block";

你应该使用document.getElementById()函数。

但是您的方法仍然很差。

这是您的方法的一个示例：

var menu = document.getElementById("menu"),
  building1 = document.getElementById("building1"),
  building2 = document.getElementById("building2"),
  section2 = document.getElementById("section2"),
  section1 = document.getElementById("section1");

menu.style.display = "block";
building1.style.display = "none";
building2.style.display = "none";
section2.style.display = "none";
section1.style.display = "none";

function menuOpen() {
  menu.style.display = "none";
  building1.style.display = "none";
  building2.style.display = "none";
  section2.style.display = "block";
  section1.style.display = "block";
}

function section1Open() {
  menu.style.display = "none";
  building1.style.display = "block";
  building2.style.display = "block";
  section2.style.display = "none";
  section1.style.display = "none";
}
<p id="menu" onclick="menuOpen()">menu</p>
<p id="section1" onclick="section1Open()">section1</p>
<p id="building1">building1</p>
<p id="building2">building2</p>
<p id="section2">section2</p>

这是一个示例，您可以如何做得更好。

更少的代码和（在我看来）更好的功能。但是您仍然可以随时更改它。

在这里而不是document.getElementById()我使用document.querySelectorAll()

function submenu(el) {
  for (var x of document.querySelectorAll("#" + el.parentNode.id + " > div")) {
    if (x.style.display == "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
}
.title[onclick] {
  cursor: pointer;
}

#menu div {
  display: none;
}
<div id="menu"><span class="title" onclick="submenu(this)">menu</span>
  <div id="section1"><span class="title" onclick="submenu(this)">section1</span>
    <div id="building1"><span class="title">building1</span></div>
    <div id="building2"><span class="title">building2</span></div>
  </div>
  <div id="section2"><span class="title">section2</span></div>
</div>

推荐阅读