开发者社区 > 云原生 > 容器服务 > 正文

zTree高度不正确问题,展开父级菜单后整个容器高度反而变小了,如何解决?? 400 报错

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>

展开
收起
爱吃鱼的程序员 2020-06-03 11:49:44 1375 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    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 : 把展开、折叠的动画去掉就没事儿了######请问就上面这个代码如何能解决呢?
    2020-06-03 11:49:56
    赞同 展开评论 打赏

国内唯一 Forrester 公共云容器平台领导者象限。

相关电子书

更多
使用CNFS搭建弹性Web服务 立即下载
阿里云文件存储 NAS 在容器场景的最佳实践 立即下载
何种数据存储才能助力容器计算 立即下载