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...');
    }
  });
};

使用$ .get（）显示菜单和子菜单

1 个答案: