尝试访问另一个函数中的JSON菜单以构建左侧导航
-
06-07-2019 - |
题
我对Jquery和JSON比较陌生,这是我在这里发表的第一篇文章,请耐心等待。
我有一个JSON菜单字符串,其中包含三个项目的数组(name,url,id - 我们的内部页面ID号),顶级导航构建得很好。我遍历顶级项目并调用递归函数来获取子菜单。
我现在要做的是在网页的一个单独部分,使用JSON菜单字符串查找顶级页面(例如news.aspx)并构建该页面的菜单及其子菜单要在左侧导航中显示的项目,仅显示在新闻页面上。
我遇到的问题是这个脚本在没有任何Javascript错误的情况下工作,但是,它正在拉动顶级导航。除了函数是CreateMenu()和CreateMenuRecursive()之外,顶层导航基本上以相同的方式调用。
我在这里使用的一些代码我是从阅读本网站上的其他帖子中得到的,但我还没有找到答案。在此先感谢您的帮助。
<div id="LeftNavDiv"> </div>
<script type="text/javascript">
$(function(){
var sidemenuString = CreateSideMenu();
$("#LeftNav").html(sidemenuString);
});
function CreateSideMenu(){
$.get("menu");
var sidenavHTML = new Sys.StringBuilder();
for(var i=0; i < menu.MenuItem.length; i++){
if(menu.MenuItem[i].id == 'a123456'){
CreateSideMenuRecursive(menu.MenuItem[i],sidenavHTML);
}
}
return sidenavHTML.toString();
}
function CreateSideMenuRecursive(item, outputHTML){
if(item.MenuItem == null || item.MenuItem.length == 0)
return;
outputHTML.append("<ul>");
for(var i=0; i < item.MenuItem.length; i++){
if(item.MenuItem[i].id == CurrentPageID){
outputHTML.append("<li><a href='" + item.MenuItem[i].url + "'>" + item.MenuItem[i].label + "</a>");
}
CreateSideMenuRecursive(item.MenuItem[i], outputHTML);
outputHTML.append("</li>");
}
outputHTML.append("</ul>");
}
</script>
解决方案
事实证明,我让它变得太复杂了。我所要做的就是从JSON菜单字符串中找到href(news.aspx)并获取子菜单。我拿走了上面的内容并将其提炼为以下几行代码:
<div id="LeftNavDiv"></div>
<script type="text/javascript">
$(function(){
var sidemenu = $("a[href$='news.aspx']").next("ul").get();
$("#LeftNavDiv").html(sidemenu);
});
</script>
它动态地创建这个div和无序列表,甚至拉动样式,即“菜单顶部”。来自JSON菜单字符串:
<div id="LeftNavDiv">
<ul>
<li class="menu-top"/>
<li><a href="sandbox1.aspx">Lorem ipsum</a></li>
<li class="menu-bot"/>
</ul>
</div>
不隶属于 StackOverflow