왼쪽 탐색 기능을 구축하기 위해 다른 함수에서 JSON 메뉴에 액세스하려고 합니다.

Question

저는 Jquery와 JSON을 처음 접했고 이것이 첫 번째 게시물입니다. 양해해 주시기 바랍니다.

세 가지 항목(이름, URL, ID - 내부 페이지 ID 번호)의 배열이 포함된 JSON 메뉴 문자열이 있고 최상위 탐색 기능이 제대로 구축되었습니다.최상위 항목을 반복하고 재귀 함수를 호출하여 하위 메뉴를 가져옵니다.

지금 하려는 작업은 웹 페이지의 별도 부분에서 JSON 메뉴 문자열을 사용하여 최상위 페이지(예: news.aspx)를 찾고 해당 페이지에 대한 메뉴를 구축하는 것이며 표시할 하위 메뉴 항목입니다. 뉴스 페이지에만 표시되는 왼쪽 탐색 기능입니다.

내가 겪고 있는 문제는 아래 스크립트가 Javascript 오류 없이 작동하지만 최상위 탐색 기능을 가져오고 있다는 것입니다.최상위 수준 탐색은 CreateMenu() 및 CreateMenuRecursive() 함수를 제외하고 기본적으로 동일한 방식으로 호출됩니다.

여기서 사용하고 있는 코드 중 일부는 이 사이트의 다른 게시물을 읽음으로써 얻었지만 이에 대한 답을 찾지 못했습니다.도움을 주셔서 미리 감사드립니다.

<div id="LeftNavDiv">&nbsp;</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>

Answer 1

알고 보니 너무 복잡하게 만들고 있었습니다.내가 해야 할 일은 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>

JSON 메뉴 문자열에서 스타일(예: "menu-top")까지 끌어오는 이 div 및 순서 없는 목록을 동적으로 생성합니다.

<div id="LeftNavDiv">
    <ul>
        <li class="menu-top"/>
        <li><a href="sandbox1.aspx">Lorem ipsum</a></li>
        <li class="menu-bot"/>
   </ul>
</div>