Expanding-Collapsable HTML List- ul - li
Question
I am trying to implement an expand-collapse list of ul and li: i am dynamically constructing the li from a json file, but couldn't make it collapsable.
I am trying with a static declaration first and then the dynamic one, my JS collapsing code works with the static but not the dynamic :( don't know why.
Here is my code :
<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>
1 answers
solution1
0 ACCPTED 2017-02-17 15:19:58
Simply change your static .click() bind to be dynamic
$(document).on('click', '.list > li a', function () {
$(this).parent().children('ul').toggle();
})
When using .event() you declare event for all elements that currently is in DOM. Since you load your JSON and than append elements, your click event does not see new elements and does nothing (that's why it's working with pre-defined DOM).
When using $('static-element-selector').on('event', 'dynamic-element-selector') you bind event to static element and listen for newly added elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.