รหัสนั้นง่ายมาก ที่นี่ส่วนใหญ่ฉันขอแนะนำแนวคิดการใช้งานของรหัสนี้ให้คุณซึ่งไม่ซ้ำกัน
ระบุรหัส:
การคัดลอกรหัสมีดังนี้:
<! 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 = gb2312" />
<title> เลือก </title>
<style type = "text/css">
*{ตัวอักษรขนาด: 14px;}
เลือก {ความสูง: 20px; ขนาดตัวอักษร: 12px;}
</style>
</head>
<body>
<div style = 'สี: สีแดง'> การเชื่อมโยง 2 ระดับ </div>
<div id = 'demo1'> </div> <br> <br> <br>
<div style = 'สี: สีแดง'> การเชื่อมโยง 3 ระดับ </div>
<div id = 'demo2'> </div> <br> <br> <br>
<div style = 'สี: สีแดง'> การเชื่อมโยงระดับ 4 </div>
<div id = 'demo3'> </div> <br> <br> <br>
<div style = 'สี: สีแดง'> การเชื่อมโยง 5 ระดับ </div>
<div id = 'demo4'> </div> <br> <br> <br>
<ภาษาสคริปต์ = "JavaScript">
var sys = (ฟังก์ชั่น (ua) {
var s = {};
s.ie = ua.match (/msie ([/d.like ight+) /)?
s.firefox = ua.match (/firefox // ([/d.]+)/)? true: false;
s.chrome = ua.match (/chrome // ([/d.]+)/)? true: false;
s.ie6 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent) เหมือนกัน [0 เหมือนกัน 2] == 6))? true: false;
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent) เหมือนกันอยู่ที่ 0.1] == 7))? true: false;
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent) เหมือนกัน [0 เหมือนกัน [1] == 8))? true: false;
กลับ s;
}) (navigator.useragent.toLowerCase ());
sys.ie6 && document.execcommand ("ackgroundimagecache", เท็จ, จริง);
ฟังก์ชั่น $ (id) {
ส่งคืน document.getElementById (id);
-
ฟังก์ชั่น $$ (P, E) {
ส่งคืน p.getElementByTagname (e);
-
ฟังก์ชั่น addListener (องค์ประกอบ, e, fn) {
Element.addeventListener? Element.addeventListener (E, FN, FALSE): Element.attacheVent ("ON" + E, FN);
-
ฟังก์ชั่น RemoveListener (Element, E, FN) {
Element.RemoveEventListener? Element.RemoveEventListener (E, FN, FALSE): Element.detacheVent ("ON" + E, FN);
-
var bind = function (วัตถุ, fun) {
var args = array.prototype.slice.call (อาร์กิวเมนต์) .slice (2);
return function () {
คืนความสนุก (วัตถุ, args);
-
-
var bindaseventListener = function (วัตถุ, สนุก) {
var args = array.prototype.slice.call (อาร์กิวเมนต์) .slice (2);
ฟังก์ชั่นส่งคืน (เหตุการณ์) {
return fun.apply (วัตถุ, [event || window.event] .concat (args));
-
-
VAR Extend = function (ปลายทาง, แหล่งที่มา) {
สำหรับ (คุณสมบัติ var ในแหล่งที่มา) {
ปลายทาง [คุณสมบัติ] = แหล่งที่มา [คุณสมบัติ];
-
-
var class = function (คุณสมบัติ) {
var _class = function () {return (อาร์กิวเมนต์ [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (สิ่งนี้, ข้อโต้แย้ง): this;};
_class.prototype = คุณสมบัติ;
กลับ _class;
-
- -
var selects = คลาสใหม่ ({
เริ่มต้น: ฟังก์ชั่น (คอนเทนเนอร์, ข้อมูล, ชื่อเรื่อง) {
this.container = คอนเทนเนอร์;
this.num = title.length;
this.events = array ใหม่ (title.length-1);
var i, l, select;
สำหรับ (i = 0; i <this.num; i ++)
-
container.innerhtml = container.innerhtml + "" + title [i];
container.appendchild (document.createelement ('เลือก'));
-
เลือก = $$ (คอนเทนเนอร์, 'select') [0];
สำหรับ (i = 0, l = data.length; i <l; i ++)
select.options.add (ตัวเลือกใหม่ (data [i] .txt, i));
addListener (เลือก, 'เปลี่ยน', ผูก (นี่, this.change, เลือก, ข้อมูล, 0));
this.change (เลือก, ข้อมูล, 0);
-
เปลี่ยน: ฟังก์ชั่น (obj, data, num) {
if (num == this.num-1) return;
var menu = data [obj.value] .menu;
เลือก = $$ (this.container, 'select') [num+1];
select.length = 0;
ถ้า (! เมนู) กลับมา;
if (this.events [num]! = undefined) RemoveListener (เลือก, 'เปลี่ยน', this.events [num])
this.events [num] = bind (this, this.change, เลือก, เมนู, num+1)
addListener (เลือก 'เปลี่ยน', this.events [num]);
สำหรับ (var i = 0, l = menu.length; i <l; i ++)
select.options.add (ตัวเลือกใหม่ (เมนู [i] .txt, i));
this.change (เลือก, เมนู, num+1);
-
-
- -
window.onload = function () {
var data = [{"txt": "การแข่งขันมนุษย์", "เมนู": [{"txt": "Magic Master", "Menu": [{"txt": "Magic Skill", "Menu": [{"txt": "องค์ประกอบน้ำ", "เมนู": ["txt": สิ่งที่ "}]}, {" txt ":" Snowstorm "," เมนู ": [{" txt ":" Magic Attack "}, {" txt ":" ความเสียหายของพื้นที่ "}, {" txt ":" สวยมาก "}, {" txt ":" สามารถขัดจังหวะได้ " Moments}]}, {"txt": "Hero Description", "Menu": [{"txt": "Intellect Hero"}, {"txt": "Halo Strong Halo"}, {"txt": "Auxiliary"},]},}, {"txt": ทักษะ "," เมนู ": [{" txt ":" พายุค้อน "}, {" tx t ":" กรวยกราวด์ "}, {" txt ":" กรวยไดอะแฟรม "}, {" txt ":" คำอธิบายฮีโร่ "," เมนู ": [" txt ": ความสามารถ "}, {" txt ":" short "}, {" txt ":" ทักษะที่ดีในการบิดเบือน "}]}]}]}, {" tt "t": "ทักษะที่ยอดเยี่ยม"}]}]}], {"tt" t ": XT ":" Paladin "," เมนู ": [{" txt ":" Paladin Skill "," เมนู ": [{" txt ":" Light "}, {" txt ":" Invincible "}, {" txt ":" hara "}, {" txt ": คำอธิบาย "," เมนู ": [{" txt ":" Strength Hero "}, {" txt ":" Hero Assisted "}, {" txt ":" การล่าส่วนตัว "}]}]}, {" txt ":" Blood Mage " ทักษะ "," เมนู ": [{" txt ":" Flame "}, {" txt ":" Blue-Absorbing "}, {" txt ":" Nonsity "}, {" txt ":" Divine Bird Phoenix "}}, {" txt ": Hero "}, {" txt ":" Hero Assisted "}, {" txt ":" รูปหล่อ "}]}]}]}]}, {" txt ":" Beast Clan "," Menu ": [{" txt ":" Silent Saint " ขั้นตอน "}, {" txt ":" Shadow Clones "}, {" txt ":" critical strike "}, {" txt ":" Blade Storm "}]}, {" txt ":" คำอธิบายฮีโร่ "," เมนู ": [" txt ":" ฮีโร่ Robbing "}, {" txt ":" ไม่เหมาะสมและอยู่ยงคงกระพัน "}, {" txt ":" ทรงพลังมาก "}]}]}]}, {" txt ทักษะ "," เมนู ": [{" txt ":" Wolf "}, {" txt ":" วัน "}, {" txt ":" สายฟ้าสายฟ้า "}, {" txt ":" Earthquake "}}, {" txt ":" Hero Description " Hero "}]}]}]}, {" txt ":" Tatou Chief "," เมนู ": [{" txt ":" Shockwave "}, {" txt ":" ตำแหน่ง "}, {" txt ": คำอธิบาย "," เมนู ": [{" txt ":" Strength Hero "}, {" txt ":" Magic Power "}, {" txt ":" Long ทรงพลัง "}, {" txt ":" โล่เนื้อสัตว์ "}]}]}, {" txt ": ทักษะ "," เมนู ": [{" txt ":" เปลี่ยนสัตว์ "}, {" txt ":" Health Wave "}, {" txt ":" Little Snake Stick "}, {" txt ":" Everything Invincible "}}, {" txt ": Power "}, {" txt ":" Hero Assisted "}]}]}]}]}]}, {" txt ":" Undead "," เมนู ": [{" txt ":" Death Knight "," Menu ": [{" txt ": halo "}, {txt:" สัญญาความตาย "}, {txt:" การฟื้นคืนชีพของคนตาย "}]}, {" txt ":" ฮีโร่คำอธิบาย "," เมนู ": [txt:" ขี่แกะ "}, {txt: seth "}]}]}]}, {" txt ":" lich "," เมนู ": [{" txt ":" ทักษะ lich "," เมนู ": [{txt:" น้ำแข็ง raging "}, {txt:" ice armor "}, {txt:" txt: คำอธิบาย "," เมนู ": [{txt:" การสวมกระโปรง "}, {txt:" กระดูกทั้งหมด "}, {txt:" ไม่มีชายหรือหญิง "}]}]}]}, {" txt ": คำอธิบาย "}]}, {" txt ":" Prince Xiaoqiang "," เมนู ": [{" txt ":" Prince Skill "}, {" txt ":" Hero Description "}]}]}];
ตัวเลือกใหม่ ($ ('demo1'), ข้อมูล, ["การแข่งขัน", "ฮีโร่"]);
ตัวเลือกใหม่ ($ ('demo2'), ข้อมูล, ["การแข่งขัน", "ฮีโร่", "บทนำ"]);
ใหม่เลือก ($ ('demo3'), ข้อมูล, ["การแข่งขัน", "ฮีโร่", "บทนำ", "ทักษะ"]);
ใหม่เลือก ($ ('demo4'), ข้อมูล, ["การแข่งขัน", "ฮีโร่", "บทนำ", "ทักษะ", "คำอธิบายทักษะ"]);
-
</script>
</body>
</html>