Javascript 带有JSON内容的下拉式弹出按钮

使用JQuery如何在鼠标悬停链接时调用JSON让我们假设我有Main DIV

<div class="mainnav">
   <UL>
    <li id="mainnav1">Movie</li>
    <li id="mainnav2">Drama</li>
    <li id="mainnav3">trailer</li>
   </UL>
 </div>

我可以用静态内容来实现这一点，但我想做的是DIV

subnav

中的任何内容都是动态的，所以我写了JSON这样的东西

   [ {    "catogoryName" : "Movie",
    "productGroupInformationList" : [ { "groupName" : "comady",
          "link" : "/comady.html",
          "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk",
                "productTitle" : "Kung Fu Dunk"
              },
              { "productLink" : "/movies/IntimateAffairs",
                "productTitle" : "Intimate Affairs"
              },
              { "productLink" : "/movies/HighHopes",
                "productTitle" : "High Hopes"
              }
            ]
        },
        { "groupName" : "Classics",
          "link" : "/classics.html",
          "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack",
                "productTitle" : "The Woman Who Came Back"
              },
              { "productLink" : "/movies/TheNorthStar",
                "productTitle" : "The North Star"
              }
            ]
        }
      ]
  } ]

---

查看和提供的功能或类似功能。每个都将允许您将JSON对象传递给模板，以允许将JSON呈现到模板中。

您可以尝试以下jQuery代码

    var jsn = [ {    "catogoryName" : "Movie",
        "productGroupInformationList" : [ { "groupName" : "comady",
            "link" : "/comady.html",
            "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk",
                  "productTitle" : "Kung Fu Dunk"
                },
                { "productLink" : "/movies/IntimateAffairs",
                  "productTitle" : "Intimate Affairs"
                },
                { "productLink" : "/movies/HighHopes",
                  "productTitle" : "High Hopes"
                }
              ]
          },
          { "groupName" : "Classics",
            "link" : "/classics.html",
            "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack",
                  "productTitle" : "The Woman Who Came Back"
                },
                { "productLink" : "/movies/TheNorthStar",
                  "productTitle" : "The North Star"
                }
              ]
          }
        ]
    } ];

 $("#mainnav1").hover(function(data) {
    for(var i in jsn)  {
        //alert( jsn[i].catogoryName);
        document.write(jsn[i].catogoryName + '<br>');
        var l2cnt = jsn[i].productGroupInformationList.length;
        for(var l2=0; l2<l2cnt; l2++ )  {
           document.write(jsn[i].productGroupInformationList[l2].groupName + '<br>');                                document.write(jsn[i].productGroupInformationList[l2].link + '<br>');
 var l3cnt =jsn[i].productGroupInformationList[l2].productsInformationList.length;
            for(var l3=0; l3<l3cnt; l3++)  {
                                   document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productLink + '<br>');
      document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productTitle + '<br>');
            }

        }

    }
});

var jsn=[{“catogoryName”：“Movie”，
“productGroupInformationList”：[{“groupName”：“comady”，
“链接”：“/comady.html”，
“产品信息列表”：[{“产品链接”：“/movies/KungFuDunk”，
“产品名称”：“功夫扣篮”
},
{“productLink”：“/电影/私人电影”，
“产品名称”：“私事”
},
{“productLink”：“/电影/希望”，
“产品名称”：“寄予厚望”
}
]
},
{“组名”：“经典”，
“链接”：“/classics.html”，
“产品信息列表”：[{“产品链接”：“/电影/回来的女人”，
“产品名称”：“回来的女人”
},
{“productLink”：“/movies/TheNorthStar”，
“产品名称”：“北极星”
}
]
}
]
} ];
$（“#mainnav1”）.hover（函数（数据）{
用于（jsn中的var i）{
//警报（jsn[i].catogoryName）；
document.write（jsn[i].catogoryName+'
'）；
var l2cnt=jsn[i].productGroupInformationList.length；
对于（var l2=0；l2tanks@Robin Michael pooturai…不知何故，我没有得到
productGroupInformationList
details…以下是我的工作示例[]@user1060990你的意思是，它工作正常，你已经完成了这个任务？它不工作……对我来说，在
productGroupInformationList
上抛出了一些未定义的错误。你能看看[jsfiddle.net/Rd6RF/19]@user1060990我已经更新了链接[jsfiddle.net/Rd6RF/19]验证它。我在Chrome上工作过，你可以测试不同的浏览器，让我知道，我在IE9中发现它会在第一次编写文档后停止，当你制作htmls时工作正常。所有其他浏览器都可以。
    var jsn = [ {    "catogoryName" : "Movie",
        "productGroupInformationList" : [ { "groupName" : "comady",
            "link" : "/comady.html",
            "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk",
                  "productTitle" : "Kung Fu Dunk"
                },
                { "productLink" : "/movies/IntimateAffairs",
                  "productTitle" : "Intimate Affairs"
                },
                { "productLink" : "/movies/HighHopes",
                  "productTitle" : "High Hopes"
                }
              ]
          },
          { "groupName" : "Classics",
            "link" : "/classics.html",
            "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack",
                  "productTitle" : "The Woman Who Came Back"
                },
                { "productLink" : "/movies/TheNorthStar",
                  "productTitle" : "The North Star"
                }
              ]
          }
        ]
    } ];

 $("#mainnav1").hover(function(data) {
    for(var i in jsn)  {
        //alert( jsn[i].catogoryName);
        document.write(jsn[i].catogoryName + '<br>');
        var l2cnt = jsn[i].productGroupInformationList.length;
        for(var l2=0; l2<l2cnt; l2++ )  {
           document.write(jsn[i].productGroupInformationList[l2].groupName + '<br>');                                document.write(jsn[i].productGroupInformationList[l2].link + '<br>');
 var l3cnt =jsn[i].productGroupInformationList[l2].productsInformationList.length;
            for(var l3=0; l3<l3cnt; l3++)  {
                                   document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productLink + '<br>');
      document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productTitle + '<br>');
            }

        }

    }
});