用到了html、css、js 代码：
<!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: 0px; padding: 0px; } .main { width: 200px; margin: 30px auto; overflow: hidden; } .nav { width: 100%; height: 40px; overflow: hidden; transition: 0.3s; } .main .nav:nth-child(1) .title{ border-top-left-radius: 15px; border-top-right-radius: 15px; } .title { display: block; height: 40px; width: 100%; line-height: 40px; text-align: center; background-image: linear-gradient(0, rgb(54, 54, 54), rgb(105, 105, 105)); } .nav div { width: 100%; height: 40px; background-color: yellowgreen; line-height: 40px; text-align: center; } .nav div:hover { background-color: tomato; } </style> <script> window.onload = function () { var title = document.getElementsByClassName("title"); var nav = document.getElementsByClassName("nav"); dop(0); dop(1); dop(2); dop(3); // 写一个函数，用于二级菜单显示 // m为下标 function dop(index) { title[index].onclick = function () { // 清除其他已经展开的下拉栏 for (var i = 0; i < title.length; i++) { // 通过getComputedStyle(obj,false).样式 获取obj当前显示的样式 if (getComputedStyle(nav[i], false).height != "40px") { nav[i].style.height = "40px"; } } // getComputedStyle获取到元素当前的样式 if (getComputedStyle(nav[index], false).height == "40px") { nav[index].style.height = (nav[index].children.length - 1) * 40 + "px"; } else { nav[index].style.height = "40px"; } } } }; </script> </head> <body> <div class="main"> <div class="nav"> <span class="title">1</span> <div>123</div> <div>456</div> <div>789</div> <div>741</div> <div>852</div> </div> <div class="nav"> <span class="title">2</span> <div>321</div> <div>654</div> <div>987</div> </div> <div class="nav"> <span class="title">3</span> <div>741</div> <div>852</div> <div>963</div> <div>369</div> </div> <div class="nav"> <span class="title">4</span> <div>789</div> <div>456</div> <div>123</div> <div>410</div> </div> </div> </body> </html>效果图： 点击前~ 点击后~
