Javascript 滑動效果菜單 TreeView [Javascript]

 

前言

     這個滑動菜單寫了蠻久了，當時沒有被用上，現在要用了又翻出來了，畢竟不是網上下載扒的，自己寫的，所以還是分享一下，覺得有時間還是盡量自己寫的好，呵呵:)

 

本文

     還是先來一張吧:

     

     效果一般，覺得還行，就是收縮的時候有時候抖，不太明白:-(

     以下是調用部分的JS代碼，比較方便:

<script type="text/javascript" defer>
        var tree = new TreeView("tree");
        //-1標示頂層,唯一編號，常值內容，連結，是否顯示(1顯示 0不顯示),彈出類型
        tree.Nodes = [
            [-1,1,'基本資料','#',0,],
            [-1,2,'積分相關內容','#',1,],
            [1,21,'修改密碼'    ,'#',,],
            [1,22,'重設密碼'    ,'#',,],
            [1,23,'修改資料'    ,'#',,],
            [1,24,'修改詳細資料','#',,],
            [1,25,'退出登入'    ,'#',,],
            [2,11,'積分規則'    ,'#',,],
            [2,12,'積分轉盤'    ,'#',,],
            [2,13,'積分促銷'    ,'#',,],
            [2,14,'常見問題'    ,'#',,],
            [2,15,'得分記錄查詢','#',,],
            [2,16,'消費記錄查詢','#',,],
            [2,17,'到期積分查詢','#',,]
        ];
        tree.Show(document.getElementById("menu"));
    </script>

          1.     這個menu是DIV的id號,body裡面加入<div id="menu"></div>就行了，注意給js加上defer，或者js代碼放在div的後面也行。

          2.     目前實現的是點一個展開一個，不收縮其他欄目，收縮其他欄目的在TreeView.js裡面也寫好了，在展開或收縮之前調用noneExpand就行了

          3.     注意目前只適用於二級欄目的

 

Demo:

        TreeView

 

結束 

     自己動手，豐衣足食!!歡迎指點、批評:)