企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 伸缩菜单_先展开 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ font-family: 宋体; } #listmenu{ width: 200px; overflow: hidden; background-color: #00A1D6; border: 1px solid #1ABC9C; } p { text-align: center; cursor: pointer; font-size: 22px; } #listmenu ul li{ width:200px; height:30px; line-height:30px; color: #4e4545; list-style:none; } </style> <script type="text/javascript"> window.onload =pageload; function pageload() { var divObj= document.getElementById("listmenu"); var ps=divObj.getElementsByTagName("p"); for(var i=0;i<ps.length;i++) { ps[i]=this; ps[i].onclick=function() { alert(this.id); var index= this.id+"a"; var ulObj= document.getElementById(index); console.log(ulObj); alert("-->"+ulObj.style.display); if(ulObj.style.display=="none") { alert("展开"); ulObj.style.display="block"; } else { alert("隐藏"); ulObj.style.display="none"; } } } } </script> </head> <body> <div id="listmenu"> <p id="one">员工信息列表</p> <ul id="onea"> <li>员工籍贯图表</li> <li>员工学历图表</li> <li>员工性别图表</li> </ul> <p id="two">部门信息列表</p> <ul id="twoa"> <li>部门工种分布</li> <li>部门成本图表</li> </ul> </div> </body> </html> ~~~