13.垂直导航.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. h2 {
  9. padding: 30px 40px;
  10. color: #ff0;
  11. background: #f00;
  12. margin-top: 30px;
  13. }
  14. ul {
  15. display: none;
  16. }
  17. ol {
  18. display: none;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h2>管理区</h2>
  24. <ul>
  25. <li>aaaa</li>
  26. <li>aaaa</li>
  27. <li>aaaa</li>
  28. </ul>
  29. <h2>交流区</h2>
  30. <ol>
  31. <li>bbb</li>
  32. <li>bbb</li>
  33. <li>bbb</li>
  34. </ol>
  35. <script>
  36. var h2 = document.querySelectorAll("h2");
  37. console.log(h2)
  38. for(var i =0;i<h2.length;i++){
  39. h2[i].onclick = function() {
  40. var ul1 = next(this);
  41. console.log(ul1);
  42. if(ul1.style.display == 'block') {
  43. ul1.style.display = 'none';
  44. } else {
  45. ul1.style.display = 'block';
  46. }
  47. }
  48. }
  49. function next(ele) {
  50. do {
  51. ele = ele.nextElementSibling;
  52. }while(ele.nodeType != 1)
  53. return ele;
  54. }
  55. </script>
  56. </body>
  57. </html>