JS Infinitusのツリーメニュー、json形式、配列形式の共通例_javascriptスキル

データ形式は変更されており、json、配列、または混合データに共通であり、

コードをコピーします コードは次のとおりです:

" id= "btn_open" value="すべて展開" />

type=" text/javascript">
var json = { "navnums": { "0": "8051", "4": "4969", "8": "206", "5": " 126", "9": "2174" }、"ホットワード": "食べ物"、"mvonline": [9, 8, [9, 8, 7, 6, 5, 4], 6, 5, 4], "district_online" : "1", "zone_online": "1", "subway_online": "1", "city_online": "1" };
/*レベルレスツリーデータを取得し、DOM構造を生成するための再帰実装* /
var str = "";
var forTree = function (o) {
var urlstr = "";
var key = new Array(); ) {
keys.push(key);
}
for (var j = 0; j k = key[j]; (typeof o [k] == "オブジェクト") {
urlstr = "

" k "

"; else {
urlstr = "
" k "=" o[k] "
";
str =
var kcn = 0 ;
if (typeof o[k] == "オブジェクト") {
for (var kc in o[k]) {
kcn ;
if ( kcn > 0) {
forTree(o[k]);
str = ""; 🎜>}
/*ステップレスツリーを追加*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*ツリーメニュー*/
var menuTree = function ( ) {
//サブオブジェクトを持つ要素に [-] を追加
$("#menuTree ul").each(function (index, element) {
var ulContent = $(element).html () ;
var scanContent = $(element).siblings("span").html();
if (ulContent) {
$(element).siblings("span").html( "[ ] "spanContent)
}
});


$("#menuTree").find("div span").click(function () {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanStr.substr(3, spanStr.length); if ( ul.find("div").html() != null) {
if (ul.css("display") == "none") {
ul.show(300); 🎜> $(this).html("[-] " scanContent);
} else {
ul.hide(300);
$(this).html("[ ] " spanContent);
}
}
})
} ()

/*expand*/
$("#btn_open").click(function () {
$( "#menuTree ul").show(300);
curzt("-")
})
/*shrink*/
$("#btn_close").click( function ( ) {
$("#menuTree ul").hide(300);
curzt(" ");
})
function curzt(v) {
$(" #menuTree span").each(function (index, element) {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
varspanContent=spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null) {
$(this).html("[" v " ] " スパンコンテンツ);
}
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery_jquery で入力要素を配置するいくつかの方法のまとめ次の記事：jquery_jquery で入力要素を配置するいくつかの方法のまとめ

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved