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. }