<!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>
