別の関数のJSONメニューにアクセスして、左側のナビゲーションを構築しようとしています

StackOverflow https://stackoverflow.com/questions/1413036

質問

私はJqueryとJSONが比較的新しいので、これがここでの最初の投稿です。ご容赦ください。

3つの項目(名前、URL、ID-内部ページID番号)の配列を持つJSONメニュー文字列があり、トップレベルのナビゲーションがうまく構築されています。トップレベルのアイテムをループし、再帰関数を呼び出してサブメニューを取得します。

今やろうとしていることは、Webページの別の部分にあり、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>
役に立ちましたか?

解決

結局のところ、私はそれをあまりにも複雑にしています。 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と無秩序なリストを動的に作成して、スタイルさえも引き出します。つまり、「menu-top」 JSONメニュー文字列から:

<div id="LeftNavDiv">
    <ul>
        <li class="menu-top"/>
        <li><a href="sandbox1.aspx">Lorem ipsum</a></li>
        <li class="menu-bot"/>
   </ul>
</div>
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top