js手风琴菜单

xiaoxiao2021-09-15  63

JS实现手风琴下拉菜单。 代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My手风琴菜单</title> </head> <body> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: black; } #box{ margin: 50px auto; background: white; width: 200px; height: auto; border: 1px solid forestgreen; } ul{ list-style: none; } a{ text-align: center; text-decoration: none; display: block; color: red; } span{ line-height: 40px; } .nav_title{ height: 40px; text-align: center; border-bottom: 1px solid grey; cursor: pointer; } a:hover{ background-color: pink; } .nav_content li{ line-height: 40px; border-bottom: 1px solid grey; cursor: pointer; } .nav_content{ overflow: hidden; background-color: rgba(0,0,0,0.7); } </style> <div id="box"> <ul> <li> <div class="nav_title"><span class="span1">One</span></div> <ul class="nav_content"> <li><a href="#">内容1</a> </li> <li><a href="#">内容1</a> </li> <li><a href="#">内容1</a> </li> </ul> </li> <li> <div class="nav_title"><span class="span1">Two</span></div> <ul class="nav_content"> <li><a href="#">内容2</a> </li> <li><a href="#">内容2</a> </li> <li><a href="#">内容2</a> </li> </ul> </li> <li> <div class="nav_title"><span class="span1">Three</span></div> <ul class="nav_content"> <li><a href="#">内容3</a> </li> <li><a href="#">内容3</a> </li> <li><a href="#">内容3</a> </li> </ul> </li> <li> <div class="nav_title"><span class="span1">Four</span></div> <ul class="nav_content"> <li><a href="#">内容4</a> </li> <li><a href="#">内容4</a> </li> <li><a href="#">内容4</a> </li> </ul> </li> <li> <div class="nav_title"><span class="span1">Five</span></div> <ul class="nav_content"> <li><a href="#">内容5</a> </li> <li><a href="#">内容5</a> </li> <li><a href="#">内容5</a> </li> </ul> </li> <li> <div class="nav_title"><span class="span1">Six</span></div> <ul class="nav_content"> <li><a href="#">内容6</a> </li> <li><a href="#">内容6</a> </li> <li><a href="#">内容6</a> </li> </ul> </li> </ul> </div> <script> addLoadEvent(spanHover) function addLoadEvent(func) { var oldonload=window.onload; if(typeof window.onload!="function") { window.onload=func; } else{ window.onload=function () { oldonload(); func(); } } } function spanHover() { var title=document.getElementsByClassName("nav_title"); var ul_content=document.getElementsByClassName("nav_content"); var span1=document.getElementsByClassName("span1"); for(var i=0;i<ul_content.length;i++){ ul_content[i].style.height=0+"px"; } title[0].onclick=function(){ back(0); } title[1].onclick=function(){ back(1); } title[2].onclick=function(){ back(2); } title[3].onclick=function(){ back(3); } title[4].onclick=function(){ back(4); } title[5].onclick=function(){ back(5); } title[0].onmouseover=function () { span1[0].style.color="red"; span1[1].style.color="black"; span1[2].style.color="black"; span1[3].style.color="black"; span1[4].style.color="black"; span1[5].style.color="black"; move(0); } title[1].onmouseover=function () { span1[0].style.color="black"; span1[1].style.color="red"; span1[2].style.color="black"; span1[3].style.color="black"; span1[4].style.color="black"; span1[5].style.color="black"; move(1); } title[2].onmouseover=function () { span1[0].style.color="black"; span1[1].style.color="black"; span1[2].style.color="red"; span1[3].style.color="black"; span1[4].style.color="black"; span1[5].style.color="black"; move(2); } title[3].onmouseover=function () { span1[0].style.color="black"; span1[1].style.color="black"; span1[2].style.color="black"; span1[3].style.color="red"; span1[4].style.color="black"; span1[5].style.color="black"; move(3); } title[4].onmouseover=function () { span1[0].style.color="black"; span1[1].style.color="black"; span1[2].style.color="black"; span1[3].style.color="black"; span1[4].style.color="red"; span1[5].style.color="black"; move(4); } title[5].onmouseover=function () { span1[0].style.color="black"; span1[1].style.color="black"; span1[2].style.color="black"; span1[3].style.color="black"; span1[4].style.color="black"; span1[5].style.color="red"; move(5); } } function move(i) { var ul_content=document.getElementsByClassName("nav_content"); var h=parseInt(ul_content[i].style.height); if(ul_content[i].style.index){ clearInterval(ul_content[i].style.index); } var speed=Math.ceil((123-h)/10); h=h+speed; for(var k=0;k<ul_content.length;k++){ if(k==i){ ul_content[i].style.height=h+"px"; }else { if(ul_content[k].style.index){ clearInterval(ul_content[k].style.index); } var s=parseInt(ul_content[k].style.height); if(s!==0){ s=s-speed; ul_content[k].style.height=s+"px"; } } } if(parseInt(ul_content[i].style.height)>=123) { return; } ul_content[i].style.index=setInterval(function () { move(i); },30) } function back(i) { var ul_content=document.getElementsByClassName("nav_content"); if(ul_content[i].style.index){ clearInterval(ul_content[i].style.index); } var h=parseInt(ul_content[i].style.height); var speed=Math.ceil(h/10); var ss=parseInt(ul_content[i].style.height); ss=ss-speed; ul_content[i].style.height=ss+"px"; ul_content[i].style.index=setInterval(function () { back(i); },30) } </script> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-4823601.html

最新回复(0)