使用$.get()显示菜单和子菜单

Question

我有一个以JSON格式生成的带有子菜单的菜单。我想用这段代码在HTML页面上显示菜单和子菜单，但它不起作用。我做错了什么。请帮帮我。

let HandleClass = function() {
$.get(SRCPATH + 'Frontend.php?method=HandleClass', function(res) {
let obj = res;
let data = obj.data;
let x;
let template = '';
let class_menu = $('.class_menu');
class_menu.html('');
if (obj['status'] === 'ok') {
for (x in data) {
let class_ref = data[x].class_ref;
let class_title = data[x].class_title;
template += '<div class="col-md-3 sub-menu mt-5 mb-5 pl-4">';
template += '<ol class="list-unstyled mx-4 dark-grey-text">';
template += '<li class="sub-title text-uppercase mt-sm"><a class="menu-item" href="/class/' + class_title.toLowerCase() + '">' + class_title + '</a></li>';
template += '</ol>';
$.get(SRCPATH + 'Frontend.php?method=HandleSubClass&param=' + class_ref, function(res_sub) {
let data_sub = res_sub.data;
let x_sub;
for (x_sub in data_sub) {
let class_sub_ref = data_sub[x_sub].class_sub_ref;
let class_sub_title = data_sub[x_sub].class_sub_title;
console.log(class_sub_title);
template += '<a href="" class""> ' + class_sub_title + '</a>';
}
});
template += '</div>';
}
class_menu.append(template);
} else {
console.log('no record found...');
}
});
};

Nb：：菜单显示工作，但子菜单不工作

Answer 1

很简单，您没有在第二个$.get中附加模板，这是一个异步事件，可以在整个事件外部$.get激发后激发。因此，为了解决这个问题，您确实需要将第二个模板再次附加到父模板中。

let HandleClass = function() {
$.get(SRCPATH + 'Frontend.php?method=HandleClass', function(res) {
let obj = res;
let data = obj.data;
let x;
let template = '';
let class_menu = $('.class_menu');
class_menu.html('');
if (obj['status'] === 'ok') {
for (x in data) {
let class_ref = data[x].class_ref;
let class_title = data[x].class_title;
template += '<div id="uniqueID" class="col-md-3 sub-menu mt-5 mb-5 pl-4">';
template += '<ol class="list-unstyled mx-4 dark-grey-text">';
template += '<li class="sub-title text-uppercase mt-sm"><a class="menu-item" href="/class/' + class_title.toLowerCase() + '">' + class_title + '</a></li>';
template += '</ol>';
$.get(SRCPATH + 'Frontend.php?method=HandleSubClass&param=' + class_ref, function(res_sub) {
let data_sub = res_sub.data;
let x_sub;
for (x_sub in data_sub) {
let class_sub_ref = data_sub[x_sub].class_sub_ref;
let class_sub_title = data_sub[x_sub].class_sub_title;
console.log(class_sub_title);
let tem = '<a href="" class""> ' + class_sub_title + '</a>';
$("#uniqueID").append(tem);
}
});
template += '</div>';
}
class_menu.append(template);
} else {
console.log('no record found...');
}
});
};