摘要：由于工作需要，這里只是把組合功能中樣式的左側菜單參考源碼實現了，分享給大家我的學習所得。代碼的配置注意在的配置利用回調將展開按鈕轉移到標簽內，否則展開按鈕即小箭頭圖片無法顯示。

為了讓朋友們更容易的學習 zTree，官網給出了大量的 Demo，不同的圖標，不同的風格，好學易懂，這是官網鏈接：zTree v3.5 Demo 演示。

由于工作需要，這里只是把組合功能中OutLook 樣式的左側菜單參考Demo源碼實現了，分享給大家我的學習所得。

下載zTree v3.5 Demo 演示的源碼，將下圖所示的文件整合出來，并創建一個outlookStyle.css文件，便于使用，如圖：

再創建任意一個html文件，引入以上的所需文件，html代碼如下：

注：demo.css可有可無，之后會結合圖片說明。

注意：在ztree的setting 配置利用 addDiyDom 回調將 展開按鈕 轉移到a標簽內，否則展開按鈕（即小箭頭圖片）無法顯示。

       var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: false,
                dblClickExpand: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"Folders", open:true},
            { id:11, pId:1, name:"Inbox"},
            { id:111, pId:11, name:"Inbox1"},
            { id:112, pId:111, name:"Inbox2"},
            { id:113, pId:112, name:"Inbox3"},
            { id:114, pId:113, name:"Inbox4"},
            { id:12, pId:1, name:"Junk"},
            { id:13, pId:1, name:"Drafts"},
            { id:14, pId:1, name:"Sent"},
            { id:15, pId:1, name:"Deleted"},
            { id:3, pId:0, name:"Quick views"},
            { id:31, pId:3, name:"Documents"},
            { id:32, pId:3, name:"Photos"}
        ];

        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 1) {
                var spaceStr = "";
                switchObj.before(spaceStr);
            }
        }

        function beforeClick(treeId, treeNode) {
            if (treeNode.level == 0 ) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandNode(treeNode);
                return false;
            }
            return true;
        }

js代碼如下：

$(document).ready(function(){
            var treeObj = $("#treeDemo");
            $.fn.zTree.init(treeObj, setting, zNodes);
            
            //這三句根據需要寫，我工作中不需要，所以刪掉了
            // zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
            // curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
            // zTree_Menu.selectNode(curMenu);

            treeObj.hover(function () {
            if (!treeObj.hasClass("showIcon")) {
                    treeObj.addClass("showIcon");
                }
             }, function() {
                treeObj.removeClass("showIcon");
             });
        });

最后實現的效果就是頁面打開時如下圖所示：

當鼠標滑過時展開按鈕顯示出來，點擊展開按鈕，層層展開，如圖：

如果，不喜歡鼠標滑過顯示，不滑過的時候不顯示，可以去掉$(document).ready(function(){});中的treeObj.hover這段，修改html的ul為