Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #_0000 a + ul { display: none; } #_0000 a.open + ul { display: block; } #_0000 a{ cursor: pointer; display: inline-block; } #_0000 a.dd:after{ content: "+"; margin-left: 4px; } #_0000 a.dd.open:after{ content: "-"; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $.getJSON('https://api.myjson.com/bins/zlxnt', function(data) { console.log(JSON.stringify(data)); data.sort(function(a,b) { if (a.PARENT > b.PARENT) return 1; if (a.PARENT < b.PARENT) return -1; return 0 }).forEach(function(el, i) { var parentId = el.PARENT; var parent = document.querySelector("#_"+parentId); var li; if(!parent) { li = $("<li>", {id : "_"+parentId}).appendTo("#_0000"); } else { $(parent).prev("a").addClass("dd"); li = $("<li>").appendTo(parent); }; $("<a>", {text : el.NAME}).appendTo(li); $("<ul>", {id : "_"+el.CID}).appendTo(li); }) }) $("#_0000").on("click", "a", function(event) { event.preventDefault(); this.classList.toggle("open") }) }); </script> </head> <body> <ul id="_0000"></ul> </body> </html> |
:lol:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #_0000 a + ul { display: none; } #_0000 a.open + ul { display: block; } #_0000 a{ cursor: pointer; display: inline-block; } #_0000 a.dd:after{ content: "+"; margin-left: 4px; } #_0000 a.dd.open:after{ content: "-"; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $.getJSON('https://api.myjson.com/bins/zlxnt', function(data) { data.sort(function(a,b) { if (a.PARENT > b.PARENT) return 1; if (a.PARENT < b.PARENT) return -1; return 0 }) console.log(JSON.stringify(data)); data.forEach(function(el, i) { var parentId = el.PARENT; var parent = document.querySelector("#_"+parentId); var li; if(!parent) { li = $("<li>").appendTo("#_0000"); $("<a>", {text : parentId, "class" : "dd"}).appendTo(li); parent = $("<ul>", {id : "_"+parentId}).appendTo(li); } else { $(parent).prev("a").addClass("dd"); }; li = $("<li>").appendTo(parent); $("<a>", {text : el.NAME}).appendTo(li); $("<ul>", {id : "_"+el.CID}).appendTo(li); }) }) $("#_0000").on("click", "a", function(event) { event.preventDefault(); this.classList.toggle("open") }) }); </script> </head> <body> <ul id="_0000"></ul> </body> </html> |
:( рони,
Пост#11 - :victory: Пост#12 - :cray: Несчастные сиротки без родителей типа {"CID":"VB16","PARENT":"_XXX","LINK":"VB16","NAME" :"Приказ о командировании (Расчет)"}:( |
Часовой пояс GMT +3, время: 15:08. |