<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>伸缩菜单</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel="stylesheet" type="text/css" href="" /><style type="text/css">body,p,ul,li{padding:0px;margin:0px;}ul li{list-style:none;}body{font-size:13px;}.menu{width:210px;margin:50px auto;border:1px solid #ccc;}.menu p{height:25px;line-height:25px;font-weight:bold;background:#eee;border-bottom:1px solid #ccc;padding-left:5px;cursor:pointer;}.menu ul li{height:24px;line-height:24px;padding-left:5px;}</style><script type="text/javascript">//剖析思路//当页面加载完成后//获取到所有的p元素 获取到所有的ul元素//给每一个p元素绑定一个onclick事宜//判断每一个p元素对应的ul是否是隐蔽或者是显示window.onload = function(){//获取id=menu工具var div_obj = document.getElementById("menu");//获取所有的p元素var ps_obj = div_obj.getElementsByTagName("p");var ps_length = ps_obj.length;//获取到所有的ul元素var uls_obj = div_obj.getElementsByTagName("ul");//给每一个p元素绑定一个onclick事宜for(var i=0;i<ps_length;i++){ps_obj[i].id = i; //给每一个p元素加上一个标识ps_obj[i].onclick = function(){//判断对应的ul是否是显示或者隐蔽if(uls_obj[this.id].style.display == "none"){uls_obj[this.id].style.display = "block";}else{uls_obj[this.id].style.display = "none";}}}}</script></head><body><div id="menu" class="menu"><div><p>web前端</p><ul style="display:none;"><li>HTML</li><li>DIV+CSS</li><li>JAVASCRIPT</li><li>jQuery</li><li>Bootstrap</li></ul></div><div><p>PHP+MYSQL核心编程</p><ul style="display:none;"><li>PHP</li><li>MYSQL</li><li>HTTP协议</li><li>PHP绘图技能</li></ul></div><div><p>PHP高等</p><ul style="display:none;"><li>XML编程</li><li>AJAX</li><li>MVC</li></ul></div></div></body></html>
类似QQ伸缩菜单:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">{margin: 0;padding: 0;list-style: none;line-height: 40px;cursor: pointer;}ul{width: 200px;margin: 0 auto;border: 1px solid #000;}h3{text-indent: 1em;background-color: dodgerblue;position: relative;}h3:before{content: "";width: 0;height: 0;border-top: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #000;position: absolute;left: 5px;top: 12px;}h3.active:before{border-top: 8px solid #000;border-left: 8px solid transparent;left: 0px;top: 15px;}ol{display: none;background-color: skyblue;}ol.active{display: block;}ol>li{text-indent: 2em;}ol>li:hover{background-color: deepskyblue;}</style><script type="text/javascript">window.onload = function(){//等待页面加载完毕//获取页面中的h3和olvar h3s = document.getElementsByTagName("h3");var ols = document.getElementsByTagName("ol");console.log(typeof h3s[0]);//objectfor(var i=0;i<h3s.length;i++){h3s[i].index = i;//这一步就即是上面的三句话h3s[i].onOff = true;//我在声明一个自定义属性 这个属性掌握下面的ol施展开还是收起状态h3s[i].onclick = function(){for(var j=0;j<ols.length;j++){h3s[j].className = "";ols[j].className = "";h3s[j].onOff = true;//无论你点击谁我都把他们的快关设置为true}if(this.onOff){this.className = "active"; //掌握三角形的形状ols[this.index].className = "active"; //掌握二级菜单是否显示}else{this.className = "";ols[this.index].className = "";}this.onOff = !this.onOff;}}}</script></head><body><ul><li><h3>我的好友</h3><ol><li>彭于晏</li><li>胡歌</li><li>迪丽热巴</li></ol></li><li><h3>企业好友</h3><ol><li>马云</li><li>马化腾</li><li>王思聪</li></ol></li><li><h3>黑名单</h3><ol><li>梁永灿</li><li>昌根群</li><li>陈伟腾</li></ol></li></ul></body></html>
