huanggr
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .tab { width: 500px; height: auto; border: 1px solid red; margin: 100px auto; } li { list-style: none; padding: 10px; border-top: 1px solid red; margin-top: -1px; /* 消除边框重叠 */ } .triangle { display: inline-block; width: 0; height: 0; border-top: 10px solid #333; border-left: 10px solid transparent; border-right: 10px solid transparent; transform: rotate(-90deg); } .title { cursor: pointer; } .content { /* padding: 10px; */ font-size: 10px; height: 0; overflow: hidden; width: 100%; } .auto_and_rotate0 { height: auto; transform: rotate(0); } </style> </head> <body> <div class="tab"> <ul> <li> <div class="title"> <div class="triangle"></div> <span>标题一</span> </div> <p class="content"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </p> </li> <li> <div class="title"> <div class="triangle"></div> <span>标题</span> </div> <p class="content">内容</p> </li> </ul> </div> </body> </html> <script> var titles = document.getElementsByClassName("title") var contents = document.getElementsByClassName("content") var triangles = document.getElementsByClassName("triangle") for (let i = 0; i < titles.length; i++) { titles[i].onclick = function () { contents[i].className = contents[i].className == 'content' ? "auto_and_rotate0 content" : "content" triangles[i].className = triangles[i].className == 'triangle' ? "auto_and_rotate0 triangle" : "triangle" } } </script> |
原生js简单实现下拉列表效果
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495…
7