最近手邊的網頁需要一個導航，
想了很久，可能用一個導航加上sub導航的方式會比較適合，
導航有AAA, BBB, CCC, DDD 四個大項目
下面各有aaa, bbb, ccc 三個小項目
AAA-->aaa, bbb, ccc
BBB-->aaa, bbb, ccc
CCC-->aaa, bbb, ccc
DDD-->aaa, bbb, ccc
我想用按下AAA後再出現aaa, bbb, ccc的方式進行，而被選中的項目下會有箭頭圖示
我覺得jquary的一些顯示方式還挺不錯 的~
試著自己做看看了
首先是要有一個jquary的文件
< src="js/jquery.js" type="text/javascript">< /script>
再來是代碼的部份
有bottom和subbottom兩個部份
< id="bottom">
< ul>
< li>< span>< a id="nav1" onclick="navTabs(1)">AAA< div>< /div>< /a>< /span>< /li>
< li>< span>< a id="nav2" onclick="navTabs(2)">BBB< div>< /div>< /a>< /span>< /li>
< li>< span>< a id="nav3" onclick="navTabs(3)">CCC< div>< /div>< /a>< /span>< /li>
< li>< span>< a id="nav4" onclick="navAppTab(4)">DDD< div>< /div>< /a>< /span>< /li>
< /UL>
< /div>
< div id="subbottom" style="display:none">
< ul id="sub1">
< li>< span>< a href="#">aaa< /a>< /span>< /li>
< li>< span>< a href="#">bbb< /a>< /span>< /li>
< li>< span>< a href="#">ccc< /a>< /span>< /li>
< /ul>
< ul id="sub2">
< li>< span>< a href="#">aaa< /a>< /span>< /li>
< li>< span>< a href="#">bbb< /a>< /span>< /li>
< li>< span>< a href="#">ccc< /a>< /span>< /li>
< /ul>
< ul id="sub3">
< li>< span>< a href="#">aaa< /a>< /span>< /li>
< li>< span>< a href="#">bbb< /a>< /span>< /li>
< li>< span>< a href="#">ccc< /a>< /span>< /li>
< /ul>
< ul id="sub4">
< li>< span>< a href="#">aaa< /a>< /span>< /li>
< li>< span>< a href="#">bbb< /a>< /span>< /li>
< li>< span>< a href="#">ccc< /a>< /span>< /li>
< /ul>
< /div>
希望的效果是，點下AAA後展開aaa, bbb, ccc的選單，
而閒置一段時間後會自動縮回。
< script type="text/javascript">
var timeID;
function navTabs(id) {
clearTimeout(timeID);
$('#subbottom').slideDown();
$('#homebottom').slideUp();
$('#nav0,#nav1,#nav2,#nav3,#nav4').removeClass('mainNavSel');
$('#nav'+id).addClass('mainNavSel');
$('#sub1,#sub2,#sub3').hide();
$('#sub'+id).show();
timeID = setTimeout("hideAll()", 4000);
}
function hideAll() {
$('#subbottom').slideUp('slow');
$('#homebottom').slideDown('slow');
$('#nav0,#nav1,#nav2,#nav3,#nav4').removeClass('mainNavSel');
}
< /script>
按下AAA觸發navTabs(1)
--> #subbottom展開
--> #homebottom收起
--> 先全部除移除class="mainNavSel"這是箭頭
--> 再把被觸發項目下加上class="mainNavSel"加上箭頭
--> sub導航先收起來
--> 被觸發的sub導航展開
--> 設定timeout時間
setTimeout觸發另一個function hideAll() ，會把所有subbottom都收起來，
但是有一個問題最後觸發的 Timeout會累加，
所以再按下另一個navTab的時候必須清除之前計算的時間，
在上面加上 clearTimeout(timeID);
打完收工~~
