Expanding-Collapsable HTML List- ul - li - Javascript
Question
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>
3 answers
solution1
0 ACCPTED 2017-02-20 13:00:34
In your script , change to toggle the "next" UL tag.
<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).next('ul').toggle();
})</script>
http://codepen.io/anon/pen/xgoapR
And to start with submenu collapsed, change
ul li ul {
display: none;
}
to
ul > ul {
display: none;
}
EDIT: Check a full working example with collapse, animation, and +/- toggle in http://codepen.io/anon/pen/mWbLpm
solution2
0 2017-02-20 13:01:14
checkout this one, there is a small validation problem with your code, you can not have ul inside ul, but you can put it inside li.
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); }); $(document).on('click', '.list > li ', function() { $(this).next('ul').toggle(); });
ul ul { display: none; } a { color: red; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu" class="list"></ul>
solution3
0 2017-02-20 13:05:12
Quick fix would be to replace last script with this snippet:
<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).next('.list').children().toggle();
})</script>
What this will do is expand and collapse the list that is right after your heading element.
A better solution would be to restructure your HTML DOM content by creating nested "ul" under "li".
Hope this helps.
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.