> 웹 프론트엔드 > JS 튜토리얼 > JS Infinitus 트리 메뉴, json 형식, 배열 형식 공통 예제_javascript 기술

JS Infinitus 트리 메뉴, json 형식, 배열 형식 공통 예제_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:27:50
원래의
1283명이 탐색했습니다.

데이터 형식이 수정되었습니다. json, 배열 또는 혼합 데이터에 공통되며 특정 키가 필요하지 않습니다.





JS 레벨리스 트리 메뉴, json 형식, 배열 형식 범용



" id= "btn_open" value="모두 확장" />



type=" text/javascript">
var json = { "navnums": { "0": "8051", "4": "4969", "8": "206", "5": " 126", "9": "2174" }, "hotwords": "음식", "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 = ""
varkeys = new Array()
for(var key in o) ) {
keys.push(key);
}
for (var j = 0; j k = 키[j]; (typeof o [k] == "object") {
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 = "
    "
    }
    return str; 🎜>}
    /*무단계 트리 추가*/
    document.getElementById("menuTree").innerHTML = forTree(json)
    /*Tree menu*/
    var menuTree = function ( ) {
    //하위 개체가 있는 요소에 [-] 추가
    $("#menuTree ul").each(function (index, element) {
    var ulContent = $(element).html () ;
    varspanContent = $(element).siblings("span").html()
    if (ulContent) {
    $(element).siblings("span").html( "[ ] "spanContent)
    }
    })


    $("#menuTree").find("divspan").click(function () {
    var ul = $(this).siblings("ul");
    varspanStr = $(this).html()
    varspanContent=spanStr.substr(3,spanStr.length); if ( ul.find("div").html() != null) {
    if (ul.css("display") == "none") {
    ul.show(300)
    $(this).html("[-] "spanContent);
    } 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");
    varspanStr = $(this).html();
    varspanContent =spanStr.substr(3,spanStr.length);
    if (ul.find("div").html() != null) {
    $(this).html("[" v " ] "spanContent);
    }
    }


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿