<html> <head> <title></title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } ul{ list-style: none; } body{ background: #f5f5f5; font-family: "Microsoft YaHei"; font-size: 12px; } .wrap{ 311px; margin:50px auto; padding:10px; border:1px #ddd solid; background: #fff; } .item{ margin-bottom: 10px; } .item .title{ height: 43px; background: url("images/zakladka.png") 0 0 no-repeat; padding-left:33px; line-height: 43px; color: #333; cursor: pointer; } .item .title span{ display: block; 26px; height: 37px; float: right; margin:3px 0 0 0; background: url("images/off.png") 0 0 no-repeat; } .item ul{ margin:5px 0; padding: 0 10px 0 33px; overflow: hidden; transition:all 0.6s ease; } .item ul li{ color:#8f9d4c; line-height:26px; cursor: pointer; } .item ul li:hover{ text-decoration: underline; } .sublist{ padding-left: 33px; /*height:0;*/ overflow: hidden; transition:all 0.6s ease; } .item ul li span{ display: block; 26px; height: 26px; float: right; background: url("images/off.png") 0 -8px no-repeat; } </style> <script> window.onload = function(){ var uls = document.querySelectorAll("ul"); var titles = document.querySelectorAll(".title"); var ulh = []; var last; var subTile = document.querySelector(".sublist-title"); var subSpan = document.querySelector(".arrow"); var sublist = document.querySelector(".sublist"); var subHeight = sublist.offsetHeight; //3级菜单显示隐藏 sublist.style.height = 0; subTile.isShow = false; subTile.addEventListener("click",function(){ var parent = this.parentNode; if(!this.isShow){ var p_height = parent.offsetHeight; sublist.style.height = subHeight + "px"; parent.style.height = p_height + subHeight + "px"; this.isShow = true; changeArrow(subSpan,true); }else{ var p_height = parent.offsetHeight; sublist.style.height = 0; parent.style.height = p_height - subHeight + "px"; this.isShow = false; changeArrow(subSpan,false); } }); //二级菜单 for(var i = 0; i < uls.length;i++){ var height = uls[i].offsetHeight; uls[i].style.height = 0; uls[i].isShow = false; ulh.push(height); } for(var i = 0; i < titles.length; i++){ (function(i){ titles[i].addEventListener("click",function(){ if(last && last != uls[i]){ last.style.height = 0; last.isShow = false; } if(!uls[i].isShow){ uls[i].style.height = ulh[i] + "px"; uls[i].isShow = true; }else{ sublist.style.height = 0; sublist.isShow = false; uls[i].style.height = 0; uls[i].isShow = false; } last = uls[i]; }); })(i); } //修改箭头 function changeArrow(elem,state){ var str; if(!state){ str = "url('images/off.png') 0 -5px no-repeat"; }else{ str = "url('images/on.png') 0 -8px no-repeat"; } elem.style.background = str; } } </script> </head> <body> <div class="wrap"> <div class="item"> <div class="title"><span></span>Item1</div> <ul> <li>subitem1</li> <li class="sublist-title"> <span class="arrow"></span> subitem2 <div class="sublist"> <p>subItem1_1</p> <p>subItem1_2</p> <p>subItem1_3</p> <p>subItem1_4</p> </div> </li> <li>subitem3</li> <li>subitem4</li> <li>subitem5</li> </ul> </div> <div class="item"> <div class="title"><span></span>Item1</div> <ul> <li>subitem1</li> <li>subitem2</li> <li>subitem3</li> <li>subitem4</li> </ul> </div> <div class="item"> <div class="title"><span></span>Item1</div> <ul> <li>subitem1</li> <li>subitem2</li> <li>subitem3</li> </ul> </div> </div> </body> </html>