Javascript 如何使用jquery为嵌套的动态列表展开/折叠（+；/-）

我尝试过切换功能，但我认为选择一个合适的列表有一些问题

var json={“亚洲”：[{“地区名”：[{“地区名”：“东亚”，“国家名单”：[{“国家名”：“中国”，“次国家名单”：[{“次国家名”：“中国南部”}，{“次国家名”：“中国东部”}，{“国家名”：“香港”}，{“地区名”：“南亚”，“国家名单”：[{“国家名”：“印度”}，{“国家名”：“巴基斯坦”}]}}}；
var html=''；
$.each（json，函数（i1，对象）{
html+='
'+i1+'；
$.each（对象、函数（i2、大陆）{
html+='
'；
$.each（洲.地区列表，函数（i3，地区）{
html+='
'+region.regionName+''；
$.each（region.Countrylist，函数（i4，国家）{
html+='
'+country.countryName；
if（国家/次国家/地区列表）{
$.each（country.subCountryList，函数（i5，subCountry）{
html+='
'+subCountry.subCountryName+'
'；
});
$（“b.”+country.countryName）.toggle（函数（）{
$（this.children（'ul'）.slideUp（）；
},
函数（）{
$（this.children（'ul'）.slideDown（）；
});
};
html+='
'；
});
html+='
'；
});
html+='
'；
});
html+='
'；
});
$（'#regionContent ol'）.html（html）
li，ol{列表样式：无；}

试试看



var json={
“亚洲”：[{
“区域列表”：[{
“地区名称”：“东亚”，
“国家名单”：[{
“国家名称”：“中国”，
“次国家主义者”：[{
“次国家名称”：“中国南方”
}, {
“子国家名称”：“中国东部”
}]
}, {
“国家名称”：“香港”
}]
}, {
“区域名称”：“南亚”，
“国家名单”：[{
“国家名称”：“印度”
}, {
“国家名称”：“巴基斯坦”
}]
}]
}]
};
var html=''；
$.each（json，函数（i1，对象）{
html+='
'+i1+'；
$.each（对象、函数（i2、大陆）{
html+='
'；
$.each（洲.地区列表，函数（i3，地区）{
html+='
'+region.regionName+''；
$.each（region.Countrylist，函数（i4，国家）{
html+='
'+country.countryName；
if（country.hasOwnProperty（“subCountryList”）&country.subCountryList.length>0）{
html+='-'；
};
$（文件）
.on（“单击”，“输入~span.”+country.countryName.replace（/\s/g，“-”）+“：first”，函数（e）{
$（this）.sides（“ul”）是（“：可见”）？$（this.sides（“ul”）.slideUp({
开始：函数（）{
e、 target.textContent=“+”
}
})：$（此）。兄弟姐妹（“ul”）。向下滑动({
开始：函数（）{
e、 target.textContent=“-
}
})
});
if（国家/次国家/地区列表）{
$.each（country.subCountryList，函数（i5，subCountry）{
html+='
'+subCountry.subCountryName+'
'；
});
};
html+='
'；
});
html+='
'；
});
html+='
'；
});
html+='
'；
});
$（'#regionContent ol'）.html（html）
li，
ol{
列表样式：无；
}

谢谢您，但功能有点不同。如果国家（如中国）有子国家，则其跨度大于带“-”号的跨度。然后，如果我们点击“-”，它将折叠子国家并添加“+”符号。当我试图添加更多的子国家时，扩展崩溃不起作用。“子国家列表”：[{“子国家名称”：“华南”}、{“子国家名称”：“华东”}、{“子国家名称”：“香港”}]当我试图添加更多的子国家时，扩展崩溃不起作用。“子国家列表”：[{“次国家名”：“华南”}、{“次国家名”：“华东”}、{“次国家名”：“香港”}]@mrp最初的问题解决了吗？在试图“添加更多次国家”之前？为什么“更多次国家”“不包括在原始问题中？可以包括到JSFIDLE的链接来演示吗？可以在问题中包括所有相关的
js
，
html
，而不是在
js
，
html
和问题中添加部分-在初始问题解决后？我对此表示歉意，我想如果它可以处理1个数据，那么它将处理所有数据。看起来不错，但是“-”在每个没有子国家的国家都适用。谢谢。但是它仍然无法处理更多的数据，比如如果国家“Hongkong”有子国家，那么代码就会崩溃。我建议使用EJS模板库使用此源代码