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

{ 
    "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

我已经找到了解决办法，寿不优雅的一个：/

这个问题似乎来自于居住在函数内部子菜单开放的功能叫uiNav主要内\assets\js\app.js文件。我认为这是在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; 
    }); 
    }); 
}; 

Answer 2

您正在尝试的，而不是它的length遍历每个阵列的主要的value，该JSON 。

尝试替换for (var i = 0; i < v.length; i++)for (var i = 0; i < data.length; i++)以便在整个阵列上循环。

让我知道，如果工作！我可能错过了一些东西:)