Javascript 单击展开html

我想按一下展开/折叠（见下图）

当一个人单击加号（+）时，它会扩展，符号会自动变为负号（-），当一个人单击负号时，它会崩溃，然后再次变为加号

这是图像，

---

我想您正在寻找树状视图。如果可以，您可以使用jquery插件实现这一点

---

我想您正在寻找树状视图。如果可以，您可以使用jquery插件实现这一点

我发现这一点，很好地实现了您想要的功能

var数据=[{
“id”：“1”，
“名称”：“公司总部”，
“预算”：“1230000”，
“地点”：“拉斯维加斯”，
“儿童”：[{
“id”：“2”，
“名称”：“财务部”，
“预算”：“423000”，
“地点”：“圣安东尼奥”，
“儿童”：[{
“id”：“3”，
“名称”：“会计部”，
“预算”：“113000”，
“地点”：“圣安东尼奥”
}, {
“id”：“4”，
“名称”：“投资部”，
“预算”：“310000”，
“地点”：“圣安东尼奥”，
儿童：[{
“id”：“5”，
“名称”：“银行办公室”，
“预算”：“24万”，
“地点”：“圣安东尼奥”
}, {
“id”：“6”，
“名称”：“债券办公室”，
“预算”：“70000”，
“地点”：“圣安东尼奥”
}, ]
}]
}, {
“id”：“7”，
“名称”：“运营部”，
“预算”：“600000”，
“地点”：“迈阿密”，
“儿童”：[{
“id”：“8”，
“名称”：“制造部”，
“预算”：“300000”，
“地点”：“迈阿密”
}, {
“id”：“9”，
“名称”：“公共关系部”，
“预算”：“200000”，
“地点”：“迈阿密”
}, {
“id”：“10”，
“名称”：“销售部”，
“预算”：“100000”，
“地点”：“迈阿密”
}]
}, {
“id”：“11”，
“名称”：“研究部”，
“预算”：“200000”，
“地点”：“波士顿”
}]
}];
变量源={
数据类型：“json”，
数据字段：[{
姓名：“姓名”，
类型：“字符串”
}, {
名称：“预算”，
类型：“编号”
}, {
姓名：“id”，
类型：“编号”
}, {
姓名：“儿童”，
类型：“数组”
}, {
名称：“地点”，
类型：“字符串”
}],
层次结构：{
词根：“儿童”
},
localData:data，
id:“id”
};
var dataAdapter=new$.jqx.dataAdapter（源、{
loadComplete:函数（）{
}
});
//创建jqxTreeGrid。
$（“#treeGrid”）.jqxTreeGrid({
来源：dataAdapter，
阿尔特罗斯：是的，
宽度：680，
主题：“能源蓝”，
复选框：正确，
就绪：函数（）{
$（“#treeGrid”）.jqxTreeGrid（'expandRow'，'1'）；
$（“#treeGrid”）.jqxTreeGrid（'expandRow'，'2'）；
},
栏目：[{
文字：“姓名”，
对齐：“居中”，
数据字段：“名称”，
宽度：300
}, {
案文：“预算”，
cellsAlign：“中心”，
对齐：“居中”，
数据字段：“预算”，
单元格格式：“c2”，
宽度：250
}, {
文字：“地点”，
数据字段：“位置”，
cellsAlign：“中心”，
对齐：“居中”
}]
});
$（“#jqxbutton”）.jqxbutton({
主题：“能量蓝”，
身高：30
});
$（'#jqxbutton'）。单击（函数（）{
$（“#treeGrid”）.jqxTreeGrid（'checkRow'，2）；
});

我发现这是一个很好的实现，可以满足您的需求


var数据=[{
“id”：“1”，
“名称”：“公司总部”，
“预算”：“1230000”，
“地点”：“拉斯维加斯”，
“儿童”：[{
“id”：“2”，
“名称”：“财务部”，
“预算”：“423000”，
“地点”：“圣安东尼奥”，
“儿童”：[{
“id”：“3”，
“名称”：“会计部”，
“预算”：“113000”，
“地点”：“圣安东尼奥”
}, {
“id”：“4”，
“名称”：“投资部”，
“预算”：“310000”，
“地点”：“圣安东尼奥”，
儿童：[{
“id”：“5”，
“名称”：“银行办公室”，
“预算”：“24万”，
“地点”：“圣安东尼奥”
}, {
“id”：“6”，
“名称”：“债券办公室”，
“预算”：“70000”，
“地点”：“圣安东尼奥”
}, ]
}]
}, {
“id”：“7”，
“名称”：“运营部”，
“预算”：“600000”，
“地点”：“迈阿密”，
“儿童”：[{
“id”：“8”，
“名称”：“制造部”，
“预算”：“300000”，
“地点”：“迈阿密”
}, {
“id”：“9”，
“名称”：“公共关系部”，
“预算”：“200000”，
“地点”：“迈阿密”
}, {
“id”：“10”，
“名称”：“销售部”，
“预算”：“100000”，
“地点”：“迈阿密”
}]
}, {
“id”：“11”，
“名称”：“研究部”，
“预算”：“200000”，
“地点”：“波士顿”
}]
}];
变量源={
数据类型：“json”，
数据字段：[{
姓名：“姓名”，
类型：“字符串”
}, {
名称：“预算”，
类型：“编号”
}, {
姓名：“id”，
类型：“编号”
}, {
姓名：“儿童”，
类型：“数组”
}, {
名称：“地点”，
类型：“字符串”
}],
层次结构：{
词根：“儿童”
},
localData:data，
id:“id”
};
var dataAdapter=new$.jqx.dataAdapter（源、{
loadComplete:函数（）{
}
});
//创建jqxTreeGrid。
$（“#treeGrid”）.jqxTreeGrid({
来源：dataAdapter，
阿尔特罗斯：是的，
维特