li标签折叠html,javascript

我正在尝试实现ul和li的展开折叠列表：我正在从json文件动态构造li，但是无法使其折叠。

我先尝试使用静态声明，然后再使用动态声明，我的JS折叠代码只能使用静态但不能使用动态:(不知道为什么。

这是我的代码：

ul li ul {

display: none;

margin-left:15px;

padding:10px;

}

a {

color: red;

}

$(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(

'

'

+ menu[i].name

+ '

');

if (menu[i].sub != null) {

var subul = $('

$(li).append(subul);

parseMenu($(subul), menu[i].sub);

}

}

}

var menu = $('#menu');

parseMenu(menu, JSON.menu);

});

});//]]>

$('.list > li a').click(function() {

$(this).parent().children('ul').toggle();

});