Question

单击菜单时，只能看到第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>

Answer 1

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

您应该使用document.getElementById()功能。

但你的做法仍然很差。

以下是您的方法示例：

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

以下是如何更好地完成这项工作的示例。

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

此处代替document.getElementById()，我使用document.querySelectorAll()

＆＃13;

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";
    }
  }
}

＆＃13;

.title[onclick] {
  cursor: pointer;
}

#menu div {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

您忘记在javascript中检索元素，您可以通过创建通过getElementById（）获取html元素的变量来实现此目的;

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p id="menu" onclick="menuClick()">menu</p>
  <p id="section1" onclick="section1Click()">section1</p>
  <p id="building1">building1</p>
  <p id="building2">building2</p>
  <p id="section2">section2</p>

  <script>
  var menu = document.getElementById("menu");
  var builing1 = document.getElementById("building1");
  var building2 = document.getElementById("building2");
  var section1 = document.getElementById("section2");
  var section2 = document.getElementById("section1");
    menu.style.display = "block";
    builing1.style.display = "none";
    building2.style.display = "none";
    section1.style.display = "none";
    section2.style.display = "none";

    function menuClick() {
      menu.style.display = "none";
      builing1.style.display = "none";
      building2.style.display = "none";
      section1.style.display = "block";
      section2.style.display = "block";
    }
    
    function section1Click() {
    
    }
  </script>

</body>
</html>

＆＃13;

Answer 3

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p id="menu" onclick="menuClickHandler()">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>
    var menu = document.getElementById("menu");
    var building1 = document.getElementById("building1");
    var building2 = document.getElementById("building2");
    var section2 = document.getElementById("section2");
    var 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 menuClickHandler () {
      menu.style.display = "none";
      building1.style.display = "none";
      building2.style.display = "none";
      section2.style.display = "block";
      section1.style.display = "block";
    }
  </script>

</body>
</html>

点击

3 个答案: