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/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis/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>
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./jquery-1.9.1.js"></script>
<script src="//ajax.googleapis./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>
- related: stackoverflow./questions/31508500/… – Ciro Santilli OurBigBook. Commented Jul 24, 2019 at 21:57
3 Answers
Reset to default 3In 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
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./ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu" class="list"></ul>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.