javascript - JSON jQuery 菜单问题

Question

我创建了一个脚本来向我正在处理的站点添加菜单，它从 JSON 文件中提取菜单数据并将其插入到页面中。当页面加载时，点击时子菜单不会打开:|

所以我在 HTML 文件中添加了一个，以查看那里是否存在问题以及那个是否完美运行。

我在这里有开发网站 https://ketchup.dev.danielcoates.co.uk/ (不再提供 30/03/17)如果您需要查看更多代码。

菜单 HTML

<div class="side-content">
  <ul class="nav-main">
    <li id="menu-0">
      <a class="nav-submenu" data-toggle="nav-submenu" href="#">
        <i class="si si-user"></i>
        <span class="sidebar-mini-hide">User Profile</span>
      </a>
      <ul>
        <li>
            <a href="base_pages_profile.html">Profile</a>
        </li>
        <li>
            <a href="base_pages_profile_v2.html">Profile v2</a>
        </li>
        <li>
            <a href="base_pages_profile_edit.html">Profile Edit</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

菜单代码

$(document).ready(function() {
  $.getJSON('/menu/menu.json', function(data) {

    // convert json into array
    var menu = [];
    $.each(data, function(k, v){
      for (var i = 0; i < v.length; i++) {
        menu.push(v[i]);
      };
    });

    for(var i=0; i < menu.length; i++) {
      if(menu[i]['type'] == 'item') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <a href="' + menu[i]['link'] + '">\
            <i class="' + menu[i]['icon'] + '"></i>\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </a>'
        );

      } else if(menu[i]['type'] == 'header') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <li class="nav-main-heading">\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </li>'
        );

      } else if(menu[i]['type'] == 'submenu') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <a class="nav-submenu" data-toggle="nav-submenu" href="#">\
            <i class="' + menu[i]['icon'] + '"></i>\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </a>'
        )
      } else if(menu[i]['type'] == 'submenu-item') {
        $('#menu-' + menu[i]['parent']).append('<ul><li><a href="/test">Test</a></ul>');
      };
    };
  });
});

JSON

{
  "menu":
  [
    { "id": 1,
      "parent": 0,
      "type": "item",
      "active": false,
      "title": "Dashboard",
      "icon": "si si-speedometer",
      "link": "/dashboard"
    },
    { "id": 2,
      "parent": 0,
      "type": "header",
      "active": false,
      "title": "Pocurement",
      "icon": false,
      "link": false
    },
    { "id": 3,
      "parent": 0,
      "type": "item",
      "active": false,
      "title": "Suppliers",
      "icon": "si si-notebook",
      "link": "/suppliers"
    },
    { "id": 4,
      "parent": 0,
      "type": "item",
      "active": true,
      "title": "Duty Calculator",
      "icon": "si si-calculator",
      "link": "/app/duty_calculator"
    },
    { "id": 5,
      "parent": 0,
      "type": "header",
      "active": false,
      "title": "Products",
      "icon": false,
      "link": false
    },
    { "id": 6,
      "parent": 0,
      "type": "submenu",
      "active": false,
      "title": "Manage Products",
      "icon": "si si-tag",
      "link": "#"
    },
    { "id": 7,
      "parent": 6,
      "type": "submenu-item",
      "active": false,
      "title": "List Products",
      "icon": false,
      "link": "/products/list"
    }
  ]
}

Answer 1

我找到了一个解决方案，但不是一个优雅的解决方案:/

问题似乎出在主 \assets\js\app.js 文件中名为 uiNav 的函数中打开子菜单的功能。我认为这是在加载 JSON 菜单之前初始化的。

通过将该代码放在 menu.js 回调中并将其放在 uiNav 函数中，它解决了这个问题。

app.js 文件中的最终代码是

var uiNav = function() {
  $.getJSON('/menu/menu.json', function(data) {

    // convert json into array
    var menu = [];
    $.each(data, function(k, v){
      for (var i = 0; i < v.length; i++) {
        menu.push(v[i]);
      };
    });

    for(var i=0; i < menu.length; i++) {
      if(menu[i]['type'] == 'item') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <a href="' + menu[i]['link'] + '">\
            <i class="' + menu[i]['icon'] + '"></i>\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </a>'
        );

      } else if(menu[i]['type'] == 'header') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <li class="nav-main-heading">\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </li>'
        );

      } else if(menu[i]['type'] == 'submenu') {
        $('.nav-main').append('<li id="menu-' + menu[i]['id'] + '"></li>');
        $('#menu-' + menu[i][['id']]).append('\
          <a class="nav-submenu" data-toggle="nav-submenu" href="#">\
            <i class="' + menu[i]['icon'] + '"></i>\
            <span class="sidebar-mini-hide">' + menu[i]['title'] + '</span>\
          </a>'
        )
      } else if(menu[i]['type'] == 'submenu-item') {
        $('#menu-' + menu[i]['parent']).append('<ul><li><a href="/test">Test</a></ul>');
      };
    };

    // When a submenu link is clicked
    jQuery('[data-toggle="nav-submenu"]').on('click', function(e){
        // Get link
        var $link = jQuery(this);

        // Get link's parent
        var $parentLi = $link.parent('li');

        if ($parentLi.hasClass('open')) { // If submenu is open, close it..
            $parentLi.removeClass('open');
        } else { // .. else if submenu is closed, close all other (same level) submenus first before open it
            $link
                .closest('ul')
                .find('> li')
                .removeClass('open');

            $parentLi
                .addClass('open');
        }

        // Remove focus from submenu link
        if ($lHtml.hasClass('no-focus')) {
            $link.blur();
        }

        return false;
    });
  });
};