实现逻辑:
/**
* 树结构需要字段
* 1.树key
* 2.树value
* 3.点击对应的key 展示对应的value
* 重点
* 1.key和value 有同一id
* 2.value 中有唯一的class 提供给key点击后做事件使用
*
*/
目录书截图:
代码
va htmlStr = "";
htmlStr += '<div style="width:80%;line-height:30px;position:absolute;cursor:pointer;">'
+'<div class="treeFatherK" ids="000">基础图层</div>' //一级树key
+'<div class="treeFatherV c000" ids="000">'//外层div value
+'<div class="treeSon">南流江工业区</div>' //二级树
+'<div class="treeSon">南流江河流流经乡镇</div>' //二级数据
+'</div>'
+'<div class="treeFatherK" ids="001">水专题</div>' //一级树key
+'<div class="treeFatherV c001" ids="001">'//一级树value
+'<div class="treeFatherK" ids="011">河流水系</div>' //二级树key
+'<div class="treeFatherV c011" ids="011">' //二级树value
+'<div class="treeSon">南流江河流流经乡镇</div>' //三级树
+'<div class="treeSon">南流江河流覆盖面</div>' //三级数据
+'<div class="treeSon">南流江河流水系</div>' //三级数据
+'<div class="treeSon">北海河流分布</div>' //三级数据
+'</div>'
+'<div class="treeFatherK" ids="021">监测点位</div>' //二级数据key
+'<div class="treeFatherV c021" ids="021">' //二级树value
+'<div class="treeSon">入河排污口</div>' //三级树
+'<div class="treeSon">监测断面</div>' //三级数据
+'</div>'
+'</div>'
+'</div>';
//添加到div中
$("#topicpanel").empty().append(htmlStr);
//设置基本样式
$(".treeFatherK").css({"margin-left":"30px"});
$(".treeFatherV").css({"margin-left":"30px","display":"none"});
$(".treeSon").css({"margin-left":"30px"});
$("#topicpanel div").css({"background-color":"#F2F2F2"});
//树目录单击事件
$(".treeFatherK").click(function(){
var textVal = $(this).attr("ids");
if($(".c"+textVal).css("display") == "none"){
$(".c"+textVal).css("display","block");
}else{
$(".c"+textVal).css("display","none");
}
});