Js折叠菜单

html脚本：

1. <h1>折叠菜单</h1>
2. <div>
3. <a href="menu1.html" class="menuLink">足球队</a>
4. <ul id="menu1">
5.     <li>国安</li>
6.     <li>AC米兰</li>
7.     <li>皇家马德里</li>
8. </ul>
9. </div>
11. <div>
12. <a href="menu2.html" class="menuLink">篮球队</a>
13. <ul id="menu2">
14.     <li>北京首钢</li>
15.     <li>休斯顿火箭</li>
16.     <li>菲尼克斯太阳</li>
17. </ul>
18. </div>
20. <div>
21. <a href="menu3.html" class="menuLink">体操</a>
22. <ul id="menu3">
23.     <li>体操队1</li>
24.     <li>体操队2</li>
25.     <li>体操队3</li>
26. </ul>
27. </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代码：

1. window.onload = initAll;
2. function initAll() {
3.     var allLinks = document.getElementsByTagName("a");
4.     for(var i=0;i<allLinks.length;i++) {
5.         if(allLinks[i].className.indexOf("menuLink")>-1) {
6.             allLinks[i].onclick = toggleMenu;
7.         }
8.     }
9. }
11. function toggleMenu() {
12.     var startLetter = this.href.lastIndexOf("/")+1;
13.     var endLetter = this.href.lastIndexOf(".");
14.     var target = this.href.substring(startLetter,endLetter);
15.     var thisMenu = document.getElementById(target).style;
16.     thisMenu.display = (thisMenu.display=="block")?"none":"block";
17.     return false;
18. }