|
|
@@ -1,27 +1,49 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>Document</title>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
+ <style>
|
|
|
+ ul {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
<div id="container">
|
|
|
- <h1>管理区</h1>
|
|
|
- <ul>
|
|
|
- <li>你好你好1</li>
|
|
|
- <li>你好你好2</li>
|
|
|
- <li>你好你好3</li>
|
|
|
- <li>你好你好4</li>
|
|
|
- </ul>
|
|
|
- <h1>项目区</h1>
|
|
|
- <ul>
|
|
|
- <li>开心开心1</li>
|
|
|
- <li>开心开心2</li>
|
|
|
- <li>开心开心3</li>
|
|
|
- <li>开心开心4</li>
|
|
|
- </ul>
|
|
|
+ <h1>管理区</h1>
|
|
|
+ <ul>
|
|
|
+ <li>你好你好1</li>
|
|
|
+ <li>你好你好2</li>
|
|
|
+ <li>你好你好3</li>
|
|
|
+ <li>你好你好4</li>
|
|
|
+ </ul>
|
|
|
+ <h1>项目区</h1>
|
|
|
+ <ul>
|
|
|
+ <li>开心开心1</li>
|
|
|
+ <li>开心开心2</li>
|
|
|
+ <li>开心开心3</li>
|
|
|
+ <li>开心开心4</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
<!-- 获取所有的h1标签 对h1标签进行点击事件 -->
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+ <script>
|
|
|
+ var container = document.querySelector("#container");
|
|
|
+ console.log(container.children);
|
|
|
+ var h1 = document.querySelectorAll("h1");
|
|
|
+ for (var i = 0; i < h1.length; i++) {
|
|
|
+ h1[i].onclick = function () {
|
|
|
+ console.log(this);
|
|
|
+ var uls = this.nextElementSibling;
|
|
|
+ console.log(uls, "uls");
|
|
|
+ if (uls.style.display == "none") {
|
|
|
+ uls.style.display = "block";
|
|
|
+ } else {
|
|
|
+ uls.style.display = "none";
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e