hujung hadapan web
tutorial js
Kod kesan menu pokok tak terhingga dilaksanakan oleh json jQuery_jquery
Kod kesan menu pokok tak terhingga dilaksanakan oleh json jQuery_jquery
Contoh dalam artikel ini menerangkan kod kesan menu pokok tak terhingga yang dilaksanakan oleh json jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Berikut ialah demonstrasi menu pokok json, menu pokok tanpa langkah JS, yang memperkenalkan pemalam jQuery dan menggunakan pelaksanaan rekursif untuk mendapatkan data pokok tanpa langkah dan menjana struktur DOM Anda boleh mengembangkan tahap tak terhingga dalam data JSON memahaminya dengan melihat strukturnya.
Mari kita lihat tangkapan skrin kesan larian:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<title>JS无级树树形菜单</title>
<style type="text/css">
.menuTree{ margin-left:-30px;}
.menuTree div{ padding-left:30px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto;}
.menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid #CCC;}
.menuTree span:hover{ background-color:#e6e6e6; color:#cf0404;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.btn{ height:30px; margin-top:10px; border-bottom:1px solid #CCC;}
</style>
</head>
<body>
<div class="btn">
<input name="" type="button" id="btn_open" value="全部展开" />
<input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="menuTree" class="menuTree"></div>
</body>
</html>
<script type="text/javascript">
var json = [{"name":"*a","list":[
{"name":"**a","url":"#a1"},
{"name":"**aa","list":[
{"name":"***a","url":"#a11"}, {"name":"***aa","list":[ {"name":"****a","url":"#a111"}, {"name":"****aa","list":[ {"name":"*****a","url":"#a1111"}, {"name":"*****aa","url":"#a1112"}
]}
]},
{"name":"***aaa","url":"#a13"},
{"name":"***aaaa","url":"#a14"}
]
},
{"name":"**a","url":"#a3"}
]
},
{"name":"*b","list":[
{"name":"**b","url":"#b1"},
{"name":"**bb","list":[
{"name":"****b","url":"#b111"},
{"name":"****bb","url":"#b112"}
]
},
]
},
{"name":"*c","list":[
{"name":"**c","url":"#c1"},
{"name":"**cc","url":"#c2"}
]
},
{"name":"*d"}
]
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o){
for(var i=0;i<o.length;i++){
var urlstr = "";
try{
if(typeof o[i]["url"] == "undefined"){
urlstr = "<div><span>"+ o[i]["name"] +"</span><ul>";
}else{
urlstr = "<div><span><a href="+ o[i]["url"] +">"+ o[i]["name"] +"</a></span><ul>";
}
str += urlstr;
if(o[i]["list"] != null){
forTree(o[i]["list"]);
}
str += "</ul></div>";
}catch(e){}
}
return str;
}
/*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function(){
//给有子对象的元素加[+-]
$("#menuTree ul").each(function(index, element) {
var ulContent = $(element).html();
var spanContent = $(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 spanContent = 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);
}
}
})
}()
/*展开*/
$("#btn_open").click(function(){
$("#menuTree ul").show(300);
curzt("-");
})
/*收缩*/
$("#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();
var spanContent = spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null){
$(this).html("["+ v +"] " + spanContent);
}
});
}
</script>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON
May 04, 2024 pm 06:15 PM
Kaedah pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON termasuk: menggunakan sambungan JSON dan fungsi json_encode() menambah pilihan JSON_UNESCAPED_UNICODE untuk mengelakkan aksara melarikan diri menggunakan penimbal untuk meningkatkan prestasi pengekodan JSON; Pustaka pengekodan JSON.
Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON?
May 06, 2024 pm 10:09 PM
Anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahserilangan JSON: Pensirilan: @JsonIgnore: Abaikan harta @JsonProperty: Tentukan nama @JsonGetter: Gunakan kaedah get @JsonSetter: Gunakan kaedah yang ditetapkan Deserialization: @JsonIgnoreProperties: Abaikan harta @ JsonProperty: Nyatakan nama @JsonCreator: Gunakan pembina @JsonDeserialize: Logik tersuai
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar Unicode JSON kepada bahasa Cina
Mar 05, 2024 pm 02:48 PM
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar JSONUnicode kepada Bahasa Cina Semasa pembangunan, kami sering menghadapi situasi di mana kami perlu memproses data JSON dan pengekodan Unicode dalam JSON akan menyebabkan kami beberapa masalah dalam beberapa senario, terutamanya apabila kami perlu menukar Unicode Apabila pengekodan ditukar kepada aksara Cina. Dalam PHP, terdapat beberapa kaedah yang boleh membantu kami mencapai proses penukaran ini Kaedah biasa akan diperkenalkan di bawah dan contoh kod khusus akan disediakan. Mula-mula, mari kita fahami dulu Un dalam JSON
Petua pantas untuk menukar tatasusunan PHP kepada JSON
May 03, 2024 pm 06:33 PM
Tatasusunan PHP boleh ditukar kepada rentetan JSON melalui fungsi json_encode() (contohnya: $json=json_encode($array);), dan sebaliknya, fungsi json_decode() boleh digunakan untuk menukar daripada JSON kepada tatasusunan ($array= json_decode($json);) . Petua lain termasuk mengelakkan penukaran mendalam, menentukan pilihan tersuai dan menggunakan perpustakaan pihak ketiga.
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
Bagaimana untuk menggunakan fungsi PHP untuk memproses data JSON?
May 04, 2024 pm 03:21 PM
PHP menyediakan fungsi berikut untuk memproses data JSON: Menghuraikan data JSON: Gunakan json_decode() untuk menukar rentetan JSON kepada tatasusunan PHP. Cipta data JSON: Gunakan json_encode() untuk menukar tatasusunan atau objek PHP kepada rentetan JSON. Dapatkan nilai khusus data JSON: Gunakan fungsi tatasusunan PHP untuk mengakses nilai tertentu, seperti pasangan nilai kunci atau elemen tatasusunan.
Tutorial PHP: Cara Menukar Unikod JSON kepada Aksara Cina
Mar 05, 2024 pm 06:36 PM
JSON (JavaScriptObjectNotation) ialah format pertukaran data ringan yang biasa digunakan untuk pertukaran data antara aplikasi web. Semasa memproses data JSON, kami sering menemui aksara Cina yang dikodkan Unikod (seperti "u4e2du6587") dan perlu menukarnya kepada aksara Cina yang boleh dibaca. Dalam PHP, kita boleh mencapai penukaran ini melalui beberapa kaedah mudah. Seterusnya, kami akan memperincikan cara menukar JSONUnico
Pengenalan kepada cara menambah baris baharu pada jadual menggunakan jQuery
Feb 29, 2024 am 08:12 AM
jQuery ialah perpustakaan JavaScript yang popular digunakan secara meluas dalam pembangunan web. Semasa pembangunan web, selalunya perlu menambah baris baharu secara dinamik pada jadual melalui JavaScript. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah baris baharu pada jadual dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML. Pustaka jQuery boleh diperkenalkan dalam teg melalui kod berikut:
