zTree高度不正确问题,展开父级菜单后整个容器高度反而变小了,如何解决?? 400 报错
@ztree 请求帮助,以下为测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ztree高度不正确问题</title> <link type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="js/jquery.ztree.exhide-3.5.js"></script> <script type="text/javascript"> // 调用 $(document).ready(function(){ // 配置 var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId" } }, callback: { onClick: onClick } }; function onClick(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); if(treeNode.isParent){ zTree.expandNode(treeNode); $("#msg").html($("#tree").height()); } } var treeNodes = [ { id:1, pId:0, name:"Root", "isParent":true, open:true, iconOpen:"css/img/diy/1_open.png", iconClose:"css/img/diy/1_close.png"}, { id:11, pId:1, name:"父节点 1-1","isHidden":false, open:true}, { id:111, pId:11, name:"叶子节点 1-1-1"}, { id:112, pId:11, name:"叶子节点 1-1-2"}, { id:113, pId:11, name:"叶子节点 1-1-3"}, { id:114, pId:11, name:"叶子节点 1-1-4"}, { id:12, pId:1, name:"父节点 1-2", open:false}, { id:121, pId:12, name:"叶子节点 1-2-1"}, { id:122, pId:12, name:"叶子节点 1-2-2"}, { id:123, pId:12, name:"叶子节点 1-2-3"}, { id:124, pId:12, name:"叶子节点 1-2-4"}, { id:13, pId:1, name:"父节点 1-3", open:false}, { id:131, pId:13, name:"叶子节点 1-3-1"}, { id:132, pId:13, name:"叶子节点 1-3-2"}, { id:133, pId:13, name:"叶子节点 1-3-3"}, { id:134, pId:13, name:"叶子节点 1-3-4"}, { id:14, pId:1, name:"父节点 1-3", open:false}, { id:135, pId:14, name:"叶子节点 1-3-1"}, { id:136, pId:14, name:"叶子节点 1-3-2"}, { id:137, pId:14, name:"叶子节点 1-3-3"}, { id:138, pId:14, name:"叶子节点 1-3-4"}, { id:15, pId:1, name:"父节点 1-3", open:false}, { id:139, pId:15, name:"叶子节点 1-3-1"}, { id:140, pId:15, name:"叶子节点 1-3-2"}, { id:141, pId:15, name:"叶子节点 1-3-3"}, { id:142, pId:15, name:"叶子节点 1-3-4"} ]; // 树菜单 var zTree = $("#tree"); zTree = $.fn.zTree.init(zTree, setting, treeNodes); }); </script> </head> <body> <div id="msg" style="background:#090; color:#FFF; height:20px; width:200px;"></div><br /><br /> <ul id="tree" class="ztree"></ul> </body> </html>
zTree 并没有专门针对 ul 这个 容器做特殊的css 设置,因为大家需求都不一样,有的要固定高度,有的要自动适应。。。所以你需要自己根据自己的情况制作 这个 ul 的样式
估计你的问题是出在这里
######能有什么变通办法得到高度自适应时ul的即时高斗数值吗?######其实我也不是要固定高度,就是希望获取当前ul实际高度就行了,问题是好像是反着,展开ul高度变小了,收起就变大了
###### @zTree 请求帮助... ######请你看看下拉菜单的 Demo, http://www.ztree.me/v3/demo.php#_507
去 demo.css 中把 ul.ztree 的 height: 360px; 样式去掉,你会发现div可以正常展开 和收缩的,不会出现你说的情况。
######测试发现高度是在onClick事件操作之后变化的,所以在onClick事件里获取的都是高度变化之前的高度(即使获取高度代码放在事件最后执行).... @ztree有没有点击之后的事件回调方法呢?###### @zTree 奇怪,上面的测试代码中也没有定义 ul 的高度呀,只是动态获取ul高度,怎么就出错了呢。。。。纠结!######expandNode 用的是 动画效果的展开,所以是异步的操作。 你这种情况只能是利用 onExpand 和 onCollapse 回调在展开 折叠操作结束后 再获取高度######回复 @akgen : 把展开、折叠的动画去掉就没事儿了######请问就上面这个代码如何能解决呢?版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。