1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Title</title> 7 <link href="JS/tool/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> 8 <script src="JS/jquery-1.11.1.min.js"></script> 9 <script src="JS/tool/zTree/js/jquery.ztree.core-3.5.js"></script> 10 <script src="JS/tool/zTree/js/jquery.ztree.excheck-3.5.js"></script> 11 <style> 12 .mainbody-left { 13 position: absolute; 14 top: 0; 15 left: 0; 16 padding-top: 52px; 17 width: 230px; 18 height: 100%; 19 background: #292929; 20 z-index: 99; 21 overflow: auto; 22 } 23 .ztree { 24 padding: 0; 25 } 26 .ztree * { 27 font-size: 14px; 28 font-family: "microsoft yahei"; 29 } 30 .ztree li a { 31 display: block; 32 padding: 4px 18px; 33 color: #fff; 34 border: 1px #292929 solid; 35 } 36 .ztree li a:hover { 37 background: #484848; 38 border: 1px #484848 solid; 39 text-decoration: none; 40 } 41 .ztree span, .ztree li ul.line { 42 background: none; 43 } 44 .ztree li a.curSelectedNode { 45 padding-top: 4px; 46 background-color: #000; 47 color: black; 48 border: 1px #000 solid; 49 opacity: 0.8; 50 } 51 .ztree li ul { 52 padding: 0; 53 } 54 .ztree > li > a { 55 padding-left: 36px; 56 } 57 .ztree > li > ul > li > a { 58 padding-left: 54px; 59 } 60 .ztree > li > ul > li > ul > li > a { 61 padding-left: 72px; 62 } 63 .ztree li a span.ico_open, .ztree li a span.ico_close, .ztree li a span.ico_docu { 64 background: none; 65 } 66 .ztree li a span.ico_open::after { 67 width: 0; 68 height: 0; 69 border: 4px solid transparent; 70 border-left: 4px solid #808080; 71 content: ""; 72 margin: 0; 73 cursor: pointer; 74 display: inline-block; 75 position: relative; 76 left: 0px; 77 top: 6px; 78 transform: rotate(90deg); 79 } 80 .ztree li a span.ico_close::after { 81 width: 0; 82 height: 0; 83 border: 4px solid transparent; 84 border-left: 4px solid #808080; 85 content: ""; 86 margin: 0; 87 cursor: pointer; 88 display: inline-block; 89 position: relative; 90 left: 2px; 91 top: 4px; 92 transform: rotate(0deg); 93 } 94 .switch { 95 display: none !important; 96 } 97 </style> 98 </head> 99 <body> 100 <div class="mainbody-left"> 101 <div class="vvtree dept-tree left"> 102 <ul id="menu_tree_left" class="ztree"></ul> 103 </div> 104 </div> 105 <script> 106 var settingLeft = { 107 view: { 108 dblClickExpand: false,//雙擊節點時，是否自動展開父節點的標識 109 showLine: false,//是否顯示節點之間的連線 110 showIcon: true, 111 fontCss: { 'color': 'white', 'font-weight': 'normal' },//字體樣式函數 112 selectedMulti: false //設置是否允許同時選中多個節點 113 }, 114 check: { 115 //chkboxType: { "Y": "ps", "N": "ps" }, 116 chkStyle: "checkbox",//復選框類型 117 enable: false //每個節點上是否顯示 CheckBox 118 }, 119 data: { 120 simpleData: {//簡單數據模式 121 enable: true, 122 idKey: "id", 123 pIdKey: "pId", 124 rootPId: "" 125 } 126 }, 127 callback: { 128 beforeClick: function (treeId, treeNode) { 129 zTree = $.fn.zTree.getZTreeObj("menu_tree_left"); 130 if (!treeNode.isParent) { 131 zTree.checkNode(treeNode, !treeNode.checked, true, true);//單擊勾選，再次單擊取消勾選 132 } 133 }, 134 onClick: function (event, treeId, treeNode) { 135 zTree = $.fn.zTree.getZTreeObj("menu_tree_left"); 136 if ($(event.target).hasClass('ico_close') || $(event.target).hasClass('ico_open')) { 137 zTree.expandNode(treeNode);//如果是父節點，則展開該節點 138 } else { 139 return; 140 } 141 }, 142 onDblClick: function (treeId, treeNode) { 143 //code 144 } 145 } 146 }; 147 148 $(function () { 149 //初始化菜單樹 150 var zNodes = [ 151 { id: 0, pId: -1, name: "一級部門", open: true }, 152 { id: 1, pId: 0, name: "二級部門1", open: false }, 153 { id: 2, pId: 1, name: "三級部門1" }, 154 { id: 3, pId: 1, name: "三級部門2" }, 155 { id: 4, pId: 0, name: "二級部門2", open: false }, 156 { id: 5, pId: 4, name: "三級部門3" }, 157 { id: 6, pId: 4, name: "三級部門4", open: false }, 158 { id: 7, pId: 6, name: "四級部門1" }, 159 { id: 8, pId: 6, name: "四級部門2" }, 160 { id: 9, pId: 0, name: "二級部門3" }, 161 { id: 10, pId: 0, name: "二級部門4" } 162 ]; 163 $.fn.zTree.init($("#menu_tree_left"), settingLeft, zNodes); 164 }); 165 </script> 166 </body> 167 </html>
修改beforeClick，並添加了onClick方法，當點擊的對象target擁有class：ico_close或ico_open時（也就是三角形圖標），才展開子節點，否則return（也可以做其他操作，自行選擇）。
onDblClick是雙擊事件。
以下是效果圖：
補充：
謝謝這位熱心的朋友@愛吃漁的熊 指出樣式存在點小問題：當渲染到四級菜單時，顯示不正常。
非常抱歉沒有詳細描述使用場景，這里做下補充。
分兩種情況：
1.如果是想把ztree菜單放在網頁左側導航區，確定子菜單不超過的級數（假設是4級），且想要在每個子菜單hover的時候修改背景顏色和占滿整行，可以采用以上的方法（逐步設置li a的padding值）
上面寫少了一級的樣式，這里加上：
.ztree li ul { padding: 0; } .ztree > li > a { padding-left: 36px; } .ztree > li > ul > li > a { padding-left: 54px; } .ztree > li > ul > li > ul > li > a { padding-left: 72px; } .ztree > li > ul > li > ul > li > ul > li > a { padding-left: 90px; }
2.其他的就歸為第二種情況了，直接設置li ul的padding，菜單樣式無限制，逐級縮進
.ztree li ul { margin: 0; padding: 0 0 0 18px; }
以上，請按需選取方案，謝謝閱讀~