Question

我的问题在理论上听起来很简单但我在使菜单正常工作方面遇到了很多麻烦。

发生的事情是我可以获得菜单来获取我想要的菜单项的标题，但是我无法正确检索内部项目，也无法让它们显示正确。

这是我的Jquery：

$(document).ready(function(){


  $.getJSON( "externalJson.json", function( data ) {
     postData(data);
});

var html = '<ul>';

function postData(data){
   /* 
   How I want my menu to work in structure:

    <ul>
        <li>
            <h3><span>Header</span></h3>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>

        </li>

    </ul>
    */
    $.each(data, function(key, value){
        console.log(data[key].innerItem);

        html += "<li><h3><span>" + key + "</span></h3>";

        $.each(data[key].innerItem, function(i, j){
            console.log(j.item);

            html += "<ul>";
            html += "<li><a href=" + j.link + ">" + j.item + "</a></li>";
            html += "</ul>";

        });

        html += "</li>";
        html += "</ul>";

    });

    $('#accordian').append(html);

};


$("#accordian h3").click(function(){

    $("#accordian ul ul").slideUp();

    if(!$(this).next().is(":visible")){
        $(this).next().slideDown();

    }
});

});

这是我的JSON文件，它位于一个单独的文件中：

   {

  "ItemOne":
    {
     "innerItem":
            [{
                "item":"cat",
                "link":"http://www.google.com/"
            }]
    },

"ItemTwo":
    {
      "innerItem":
            [{
                "item":"kitten",
                "link":"http://www.google.com/"
            }]
    },

"ItemThree":
    {
     "innerItem":
            [{
                "item":"meow",
                "link":"http://www.google.com/"
            }]
    },

"ItemFour":
    {
       "innerItem":
            [{
                "item":"purr",
                "link":"http://www.google.com/"
            }]
    }
  }

如果您想查看我的所有代码，请点击以下链接：https://ide.c9.io/cherrysymphony/workspace#openfile-README.md

我不太明白我需要做些什么来使代码正常工作，就像我将其硬编码到html中一样。

Answer 1

我不确定我理解你的问题，但这可能是解决方案吗？

$.each(data, function(key, value){
  console.log(data[key].innerItem);

  html += "<li><h3><span>" + key + "</span></h3>";

  html += "<ul>";
  $.each(data[key].innerItem, function(i, j){
    console.log(j.item);

    html += "<li><a href=" + j.link + ">" + j.item + "</a></li>";

  });
  html += "</ul>";

  html += "</li>";
  html += "</ul>";

});

通过外部嵌套Json迭代制作手风琴菜单

1 个答案: