JSON jQueryメニューの問題

Question

私が作業しているサイトにメニューを追加するためのスクリプトを作成しました。これはJSONファイルからメニューデータを取り出してページに挿入します。ページがロードされると、サブメニューはクリックされても開きません。

私はHTMLファイルに1つを追加して、そこに問題があるかどうか、そしてそれが完全に機能するかどうかを確認しました。

コードの詳細が必要な場合は、私はdevサイトをここに住んでいます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ファイル。 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

あなたが各配列のキーのvalueを反復処理しようとするのではなく、そのlengthされています。

アレイ全体をループするためにfor (var i = 0; i < v.length; i++)をfor (var i = 0; i < data.length; i++)に置き換えてみてください。

それがうまくいったら教えてください！/

問題がメインの内側にuiNav呼び出された関数内に存在するサブメニューの開口部のための機能から来ているようだ：私は、私はエレガントなもの解決策を見つけ、カントーしていない:)