我正在尝试实现 ul 和 li 的展开-折叠列表: 我正在从 json 文件动态构建 li，但无法使其可折叠。
我先尝试静态声明，然后再尝试动态声明， 我的 JS 折叠代码适用于静态但不适用于动态 :( 不知道为什么。
这是我的代码:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
ul li ul {
display: none;
margin-left:15px;
padding:10px;
}
a {
color: red;
}
</style>
<script type="text/javascript">
$(window)
.load(
function() {
var JSON = {
menu : [ {
name : 'Title',
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 class="content"><a href="'+menu[i].link+'">'
+ menu[i].name
+ '</a></li>');
if (menu[i].sub != null) {
var subul = $('<ul id="submenu'+menu[i].link+'"></ul>');
$(li).append(subul);
parseMenu($(subul), menu[i].sub);
}
}
}
var menu = $('#menu');
parseMenu(menu, JSON.menu);
});
});//]]>
</script>
</head>
<body>
<ul id="menu" class="list">
</ul>
<script type="text/javascript">
$('.list > li a').click(function() {
$(this).parent().children('ul').toggle();
});
</script>
</body>
</html>
最佳答案
只需将静态 .click() 绑定(bind)更改为动态
$(document).on('click', '.list > li a', function () {
$(this).parent().children('ul').toggle();
})
当使用 .event() 时，您为当前在 DOM 中的所有元素声明事件。由于您加载 JSON 而不是追加元素，因此您的点击事件看不到新元素并且什么也不做(这就是它使用预定义 DOM 的原因)。
当使用 $('static-element-selector').on('event', 'dynamic-element-selector') 时，您将事件绑定(bind)到静态元素和 监听新添加的元素。
关于javascript - 展开式可折叠 HTML 列表- ul - li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42301127/