104
rated 0 times
[
106]
[
2]
/ answers: 1 / hits: 23384
/ 7 Years ago, mon, february 20, 2017, 12:00:00
I am implementing a ul and li list, from json data and with expand/collapse function.
The problem is that when trying the expand/collapse, all the subitems are expanding together, but i want only the clicked one to be collapsed/expanded;
Here is my code :
<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>
More From » html
