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; }
以上，请按需选取方案，谢谢阅读~