<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的二级菜单</title> <style> *{ padding:0; margin: 0; } .king_box{ width: 100%; height: 706px;/*包含一切的盒子*/ } .main_menu{ /*二级菜单主体*/ width: 200px; height: 100%; margin:2px 2px; background-color:grey; overflow:auto; /*主体和限定好高度让他溢出的部分能够滑动*/ overflow-x: hidden; } .main_menu::-webkit-scrollbar { width: 0; /*将滑动条的宽度设置为0可以滑动但不显示滑动条*/ } .menu_title{ /*菜单头*/ width: 100%; height:100px; font-size: 55px; text-align: center; line-height: 100px; border-bottom:1px solid black; } li{ /*li属于不能设置宽高的标签加上浮动或定位让他可以设置*/ position:relative; width: 100%; height: 25px; list-style: none; line-height: 25px; border-bottom:1px solid black; cursor:pointer; } .menu_sj{ /*设置三角形盒子不能让他超过li列表*/ width: 5px; height:5px; /*空心三角形是利用边框的厚度配合盒子的大小显示的*/ /*实心三角是单纯的边框显示的*/ float: left; border: 2px solid transparent; border-bottom-color: black; border-right-color: black; margin-top: 8px; margin-left: 5px; transform: rotate(-45deg); } .menu_lb { /*调整菜单标题*/ margin-left: 5px; float: left; } li a{ /*调整二级菜单的二级链接*/ text-decoration: none; color: black; /*给他加浮动可以设置他的宽*/ float: left; width: 100%; height:100%; /*调整二级菜单字体位置*/ padding-left:15%; } .public_div_style{ /*调整每个部分盒*/ width: 100%; height: 26px !important; overflow: hidden; position: relative; /*只让他显示25px 的高度加1px是让他把边框也显示出来*/ } li:hover{ background-color:gold; } .open_list{ width: 100%; overflow: hidden; position: relative; } </style> <script type="text/javascript"> window.onload=function(){ var open_menu=document.getElementsByName("open_menu"); var record=open_menu[0];/*记录被打开的list*/ for (let i=0;i<open_menu.length;i++){ open_menu[i].onclick=function(){ let startHei=open_menu[i].parentNode.parentNode.offsetHeight; if(open_menu[i]!=record) { openList(open_menu[i],startHei); }else{ record=null; closeList(open_menu[i]); } } } function openList(obj,startHei){ if (record!=null) { record.parentNode.parentNode.className = "public_div_style";/*已打开的列表关闭*/ } record=obj; obj.parentNode.parentNode.className="open_list";/*需要被打开的列表打开*/ let needHei=obj.parentNode.parentNode.offsetHeight; obj.parentNode.parentNode.style.height=startHei+"px"; if(startHei<needHei){ action_increase(obj,needHei); } } function closeList(obj){ obj.parentNode.parentNode.className ="public_div_style"; } function action_increase(obj,needHei){/*增长行为*/ let begin_move=setInterval(function(){ if (obj.parentNode.parentNode.offsetHeight>=needHei) { /*完成后清除继续增长与style中的高*/ clearInterval(begin_move); let clearHeiS=setTimeout(function(){ //为什么我要用定时器清除style中的高?因为js执行速度有点快放出来直接不起作用 obj.parentNode.parentNode.style.height=""; },10); } obj.parentNode.parentNode.style.height=obj.parentNode.parentNode.offsetHeight+3+"px"; },10); } } </script> </head> <body> <div class="king_box"> <div id="main_menu" class="main_menu"> <div id="menu_title" class="menu_title" >Title</div> <div class="open_list"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第一分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> <li><a href="#">试试是</a></li> <li><a href="#">试试是</a></li> <li><a href="#">试试是</a></li> </ul> </div> <div class="public_div_style"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第二分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> </ul> </div> <div class="public_div_style"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第三分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> </ul> </div> <div class="public_div_style"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第四分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> </ul> </div> <div class="public_div_style"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第五分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> </ul> </div> <div class="public_div_style"> <ul> <li name="open_menu"><div class="menu_sj"></div><span class="menu_lb">第六分部</span></li> <li><a href="#">是是是</a></li> <li><a href="#">是是是</a></li> <li><a href="#">试试是</a></li> </ul> </div> </div> </div> </body> </html>