我正在实现一个 ul 和 li 列表，来自 json 数据并具有展开/折叠功能。
问题是，当尝试展开/折叠时，所有子项都一起展开，但我只想折叠/展开被点击的子项；
这是我的代码:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
ul li ul {
display: none;
}
a {
color: red;
}
</style>
<title></title>
</head>
<body>
<ul id="menu" class="list">
</ul>
<script type="text/javascript">
$(window)
.load(
function() {
var JSON = {
menu : [ {
name : 'Title',
link : '#',
sub : [ {
name : 'Enclosure1',
link : '#',
sub : null
}, {
name : 'Enclosure2',
link : '#',
sub : null
}, {
name : 'Enclosure3',
link : '#',
sub : null
} ]
},{
name : 'Link',
link : '#',
sub : null
},{
name : 'Content',
link : '#',
sub : null
},{
name : 'Enclosures',
link : '#',
sub : [ {
name : 'Enclosure1',
link : '#',
sub : null
}, {
name : 'Enclosure2',
link : '#',
sub : null
}, {
name : 'Enclosure3',
link : '#',
sub : null
} ]
}, {
name : 'Authors',
link : '#',
sub : [ {
name : 'Author1',
link : '#',
sub : null
}, {
name : 'Author2',
link : '#',
sub : null
} ]
},{
name : 'Published At',
link : '#',
sub : null
}, {
name : 'Stream',
link : '#',
sub : [ {
name : 'STR1',
link : '#',
sub : null
}, {
name : 'STR2',
link : '#',
sub : null
} ]
} ]
}
$(function() {
function parseMenu(ul, menu) {
for (var i = 0; i < menu.length; i++) {
var li = $(ul).append(
'<li>'+ menu[i].name
+ '</li>');
if (menu[i].sub != null) {
var subul = $('<ul class="list"></ul>');
$(li).append(subul);
parseMenu($(subul), menu[i].sub);
}
}
}
var menu = $('#menu');
parseMenu(menu, JSON.menu);
});
});//]]>
</script>
<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).parent().children('ul').toggle();
})
</script>
</body>
</html>
最佳答案
在您的脚本中，更改以切换“下一个”UL 标记。
<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).next('ul').toggle();
})</script>
http://codepen.io/anon/pen/xgoapR
并从折叠的子菜单开始，更改
ul li ul {
display: none;
}
到
ul > ul {
display: none;
}
编辑: 检查带有折叠、动画和 +/- 切换的完整工作示例 http://codepen.io/anon/pen/mWbLpm
关于javascript - 扩展-可折叠 HTML 列表- ul - li - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42344974/