帮助使用json和jquery的多级菜单
||
我正在尝试创建一个多级菜单，当单击\“> \”时，该菜单会滑动。第一个问题是CSS无法正常工作，
- \并没有浮动到左侧。
我只需要显示一个ul，如果单击\“> \”，则显示滑动其或显示它的“儿童”菜单，则任何方法都是有用的。
准备测试的完整代码在这里
我正在尝试这样做：菜单
的JavaScript
$(document).ready(function(){
var json = [{\"id\":\"1\",\"parent\":\"0\",\"slug\":\"digitalart\",\"name\":\"Digital Art\"},{\"id\":\"2\",\"parent\":\"1\",\"slug\":\"3d\",\"name\":\"3-Dimensional Art\"},{\"id\":\"39\",\"parent\":\"1\",\"slug\":\"drawings\",\"name\":\"Drawings\"},{\"id\":\"3\",\"parent\":\"2\",\"slug\":\"abstract\",\"name\":\"Abstract\"},{\"id\":\"4\",\"parent\":\"2\",\"slug\":\"characters\",\"name\":\"Characters\"},{\"id\":\"12\",\"parent\":\"2\",\"slug\":\"objects\",\"name\":\"Objects\"},{\"id\":\"23\",\"parent\":\"2\",\"slug\":\"scenes\",\"name\":\"Scenes\"},{\"id\":\"32\",\"parent\":\"2\",\"slug\":\"unsorted\",\"name\":\"Unsorted\"},{\"id\":\"33\",\"parent\":\"2\",\"slug\":\"vehicles\",\"name\":\"Vehicles\"},{\"id\":\"5\",\"parent\":\"4\",\"slug\":\"creatures\",\"name\":\"Animals & Creatures\"},{\"id\":\"6\",\"parent\":\"4\",\"slug\":\"cartoon\",\"name\":\"Cartoon\"},{\"id\":\"7\",\"parent\":\"4\",\"slug\":\"female\",\"name\":\"Female\"},{\"id\":\"8\",\"parent\":\"4\",\"slug\":\"groups\",\"name\":\"Groups\"},{\"id\":\"9\",\"parent\":\"4\",\"slug\":\"machines\",\"name\":\"Machines & Robots\"},{\"id\":\"10\",\"parent\":\"4\",\"slug\":\"male\",\"name\":\"Male\"},{\"id\":\"11\",\"parent\":\"4\",\"slug\":\"misc\",\"name\":\"Miscellaneus\"}];
build_menu(json, 0);
});
function build_menu(json, parent){
var menu;
var item = \"\";
var counter = 0;
if(parent != \'0\'){
item += \'<li><a class=\"more\" onClick=\"show(); return false;\" href=\"#\">Back</a></li>\';
}
$.each(json, function(i, category) {
if(category.parent == parent){
var more = \'<a class=\"more\" onClick=\"show(\'+parent+\'); return false;\" href=\"#\">></a>\';
item = item + \'<li>\' + category.name + more + \'</li>\';
build_menu(json, category.id);
counter++;
}
});
if(counter > 0){
menu = \'<ul class=\"menu\" id=\"category\' + parent + \'\">\' + item + \'</ul>\';
$(\'#menu\').prepend(menu);
}
}
function show(id){
$(\".menu\").hide();
$(\"#category\"+id).show();
}
#menu{
width: 180px;
overflow: hidden;
}
#menu ul{
width: 180px;
float: left;
list-style: none;
}
#menu ul li{
border: solid 1px black;
margin-bottom: 5px;
}
#menu li .more{
//float: right;
text-decoration: none;
margin-right: 5px;
}
<div id=\"menu\">
</div>
没有找到相关结果
已邀请:
1 个回复
埃庐
build_menu(json, 0); $(\'.back\').hide(); $(\'ul\').not(\'.parent\').hide(); }); function build_menu(json, parent, parentID) { var menu, li; var item = $(\'<ul class=\"menu \' + (parent == \'0\' ? \'parent\' : \'\') + \'\" id=\"category\' + parent + \'\"></ul>\'); var counter = 0; if (parent != \'0\') { li = $(\'<li><a class=\"back\" href=\"#\">Back</a></li>\'); li.click(function() { $(\'.back\').hide(); $(\"#category\" + parentID).show(); $(\"#category\" + parent).hide(); $(\'.back\', $(\"#category\" + parentID)).show(); return false; }) li.appendTo(item); } $.each(json, function(i, category) { if (category.parent == parent) { var more = $(\'<a class=\"more\" href=\"#\">></a>\'); more.click(function(e) { e.preventDefault(); $(\'.back\', $(\"#category\" + category.id)).show(); $(\"#category\" + category.id).show(); $(\"#category\" + parent).hide(); console.log(\"#category\" + category.id, $(\"#category\" + category.id)); if ($(\"#category\" + category.id).length <= 0) { //NO CHILDREN $(\'.back\').hide(); $(\"#category\" + parent).show(); $(\'.back\', $(\"#category\" + parent)).show(); } return false; }) li = $(\'<li>\' + category.name + \'</li>\'); more.appendTo(li); li.appendTo(item); build_menu(json, category.id, parent); counter++; } }); if (counter > 0) { menu = item; $(\'#menu\').prepend(menu); } }