html脚本:
- <h1>折叠菜单</h1>
- <div>
- <a href="menu1.html" class="menuLink">足球队</a>
- <ul id="menu1">
- <li>国安</li>
- <li>AC米兰</li>
- <li>皇家马德里</li>
- </ul>
- </div>
- <div>
- <a href="menu2.html" class="menuLink">篮球队</a>
- <ul id="menu2">
- <li>北京首钢</li>
- <li>休斯顿火箭</li>
- <li>菲尼克斯太阳</li>
- </ul>
- </div>
- <div>
- <a href="menu3.html" class="menuLink">体操</a>
- <ul id="menu3">
- <li>体操队1</li>
- <li>体操队2</li>
- <li>体操队3</li>
- </ul>
- </div>
注意:超链接的地址是找到对应ul的标识。
思路:
-
取页面上所有的a标签
-
根据类名判断是否为菜单上的a标签(不能直接使用getElementsByClassName,IE6不识别),所以需要判断类名中是否含有"menuLink"
-
点击执行显示和隐藏功能的函数
-
找到超链接地址this.href(完全路径)
-
截取到超链接地址,lastIndexOf(这个方法和indexOf不同,是从后往前寻找,但结果都是从0开始的位置号),然后用substring截取字符串(substring(开始,结束)),最后截取的值,包括开始的字符,但不包括结束的字符,可以叫有头无尾。
-
控制style.display,通过(display=="block")?"none":"block";来使点击即能执行展开,又能执行收缩操作。
-
结束一定要加return false,才能使超链接虽然点击了却不跳转。
-
注意,在css中要定义下ul默认的display属性,否则点击在第一次点击超链接的时候,display值为默认而不是none。
JS代码:
- window.onload = initAll;
- function initAll() {
- var allLinks = document.getElementsByTagName("a");
- for(var i=0;i<allLinks.length;i++) {
- if(allLinks[i].className.indexOf("menuLink")>-1) {
- allLinks[i].onclick = toggleMenu;
- }
- }
- }
- function toggleMenu() {
- var startLetter = this.href.lastIndexOf("/")+1;
- var endLetter = this.href.lastIndexOf(".");
- var target = this.href.substring(startLetter,endLetter);
- var thisMenu = document.getElementById(target).style;
- thisMenu.display = (thisMenu.display=="block")?"none":"block";
- return false;
- }