zTree高度不正确问题，展开父级菜单后整个容器高度反而变小了，如何解决？
@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" href="css/ztree.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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
expandNode 用的是 动画效果的展开，所以是异步的操作。 你这种情况只能是利用 onExpand 和 onCollapse 回调在展开 折叠操作结束后 再获取高度
回复
把展开、折叠的动画去掉就没事儿了
请问就上面这个代码如何能解决呢？
@zTree 奇怪，上面的测试代码中也没有定义 ul 的高度呀，只是动态获取ul高度，怎么就出错了呢。。。。纠结！
测试发现高度是在onClick事件操作之后变化的，所以在onClick事件里获取的都是高度变化之前的高度（即使获取高度代码放在事件最后执行）.... @ztree有没有点击之后的事件回调方法呢？
请你看看下拉菜单的 Demo， http://www.ztree.me/v3/demo.php#_507
去 demo.css 中把 ul.ztree 的 height: 360px; 样式去掉，你会发现div可以正常展开 和收缩的，不会出现你说的情况。
@zTree 请求帮助...
其实我也不是要固定高度，就是希望获取当前ul实际高度就行了，问题是好像是反着，展开ul高度变小了，收起就变大了
能有什么变通办法得到高度自适应时ul的即时高斗数值吗？
zTree 并没有专门针对 ul 这个 容器做特殊的css 设置，因为大家需求都不一样，有的要固定高度，有的要自动适应。。。所以你需要自己根据自己的情况制作 这个 ul 的样式
估计你的问题是出在这里