다중 트리 내비게이션, 등급 귀속 불러오는 것을 확정하지 못합니다. 마지막 단계는 선택할 수 있으며, 선택 결과를 div에 채우거나 div에서 삭제할 수 있습니다.
다중 트리 내비게이션, 등급 귀속 불러오는 것을 확정하지 못합니다. 마지막 단계는 선택할 수 있으며, 선택 결과를 div에 채우거나 div에서 삭제할 수 있습니다.
잔말 말고 바로 코드에 올리시오
Document
var data = [
{
name: ' ',
child: [
{
name: ' ',
child: [
{
name: 'a1-1',
child: [
{
name: ' -1'
},
{
name: ' -2'
}
]
},
{
name: 'a1-2'
}
]
},
{ name: 'a2' }
]
},
{
name: ' ',
child: [
{
name: ' '
},
{
name: ' '
}
]
},
{
name: ' ',
child: [
{
name: 'c1'
},
{
name: 'c2'
}
]
}
];
var lists = $(".nav_lists");
build(lists, data);
$('.sub_li').on('click',function(event){//
event.stopPropagation();
var text=$(this).text()
var content= $('.content').text();
var str=text+","
if(content.indexOf(str)>=0){
tempArr=content.split(str).join().split(',')
content="";
for (var i = 0; i < tempArr.length; i++) {
if(tempArr[i]!=""){
content=tempArr[i]+','+content
}
}
$('.content').text(content)
$(this).removeClass('selected')
}else{
$(this).addClass('selected')
$('.content').text((text+","+content).split(',').join())
}
})
$('.nav_li').on('click',function(event){//
event.stopPropagation();
$(this).children('ul').slideToggle(300);
})
function build(ele, arr) {//
var strUl = $('<ul></ul>');
for (var i = 0; i < arr.length; i++) {
var strLi = $("<li>" + arr[i].name + "</li>");
if (!arr[i].child) {
strLi.addClass('sub_li').appendTo(strUl);
}else{
strLi.addClass('nav_li').appendTo(strUl);
build(strLi, arr[i].child);
}
}
strUl.appendTo(ele);
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
