13_垂直导航.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. ul{
  14. list-style: none;
  15. }
  16. h2{
  17. width: 300px;
  18. height: 50px;
  19. background: #000;
  20. color: white;
  21. }
  22. ul{
  23. display: none;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="container">
  29. <h2>管理区</h2>
  30. <ul>
  31. <li>111</li>
  32. <li>111</li>
  33. <li>111</li>
  34. </ul>
  35. <h2>交流区</h2>
  36. <ul>
  37. <li>222</li>
  38. <li>222</li>
  39. <li>222</li>
  40. </ul>
  41. </div>
  42. <script>
  43. var h2 = document.getElementsByTagName('h2')
  44. for(var i=0;i<h2.length;i++){
  45. h2[i].onclick = function(){
  46. var ul1 = this.nextElementSibling
  47. if(ul1.style.display == 'block'){
  48. ul1.style.display = 'none'
  49. } else{
  50. ul1.style.display = 'block'
  51. }
  52. }
  53. }
  54. </script>
  55. </body>
  56. </html>