我正在尝试实现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()绑定为动态
$(document).on('click', '.list > li a', function () {
$(this).parent().children('ul').toggle();
})
使用.event()时，您可以为当前在DOM中的所有元素声明事件。由于您加载了JSON和附加元素，因此您的点击事件不会看到新元素，并且什么也不做（这就是为什么它可以与预定义的DOM一起使用）。
使用$('static-element-selector').on('event', 'dynamic-element-selector')时，您将事件绑定到静态元素和聆听新添加的元素。