<ul> <li>一级菜单</li> <li>一级菜单存在子菜单<li> <li class="hasSon"> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul>
实现的功能是点击存在子菜单的一级菜单,能够打开或关闭该子菜单下的二级菜单。
之前想通过纯CSS来实现,找了很久发现CSS无法监听onclick动作,最终放弃,结合js来做。其实用JQuery来实现更简单,不过为了更加通用,还是决定用原生js来实现。
这里定义了一对样式,分别是in和out,表示关闭和打开折叠菜单。利用css选择器,选择紧连着li的ul标签,设置display属性。这样js部分,只需要替换class的样式就可以了。
.out { } .out + ul { display: block; } .in { } .in + ul { display: none; }
js代码如下,用到的知识点比较多,获取对象的方法,替换字符串的方法,遍历对象组的方法等。
//获取所有拥有子菜单的对象 var objects = document.getElementsByClassName("hasSon"); for (var i = 0; i < objects.length; i++) { var element = objects[i]; //遍历对象,绑定点击事件方法 element.onclick = function () { var temp = this.className; //替换out、in对象 if (temp.indexOf("out") != -1) { this.className = temp.replace(/out/, "in"); } else if (temp.indexOf("in") != -1) { this.className = temp.replace(/in/, "out"); } else { this.className = "out"; } } }