Home > Developer > JavaScript
This article describes the JavaScript implementation of the DOM dynamically create a Provincial Vertical list menu method. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 | <! 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 "/> <title> Dynamically create portrait list </title> <style type=" Text/css "> A {color: #000; text-decoration : none; } a:hover {color: #F00;} #menu {width:100px; border:1px solid #CCC; border-bottom:none;} #menu ul {list-style:none; margin:0px; padding:0px; #menu ul li {background: #eee; padding:0px 8px; height:26px; line-height:26px; border-bottom:1px solid #CCC; positi on:relative; #menu ul Li ul {display:none; position:absolute; left:100px; top:0px; width:100px;border:1px solid #ccc; Border-bott Om:none; #menu UL li.current ul {display:block;} #menu ul Li ul li{text-align:center}/* Set the City Content Center/</style> <script Ty Pe= "Text/javascript" > var Provs = {"Jiangxi province": ["Nanchang", "Jingdezhen", "Jiujiang", "Yingtan", "Pingxiang", "New Surplus", "Ganzhou"," Ji ' an "," Yichun "," Fuzhou "," Shangrao "]," Fujian Province ": [" Fuzhou "," Xiamen "," Putian "," sanming "," Quanzhou "," Zhangzhou "," Nanping "," Longyan "," Ningde "]," Hebei province ": [" Shijiazhuang "," Handan "," Xingtai "," Baoding " , "Zhangjiakou", "Chengde", "Langfang", "Tangshan", "Qinhuangdao", "Cangzhou", "Hengshui"], "Sichuan Province": ["Chengdu City", "Zigong", "Panzhihua", "Luzhou", "Deyang", "Mianyang", "Guangyuan", "Suining", "Neijiang", "Leshan City "," Nanchong "," Meishan "," Yibin "," Guangan "," Dazhou "," Yaan "," Bazhong "," Ziyang "," Aba Tibetan and Qiang Autonomous Prefecture "," Ganzi Tibetan Autonomous Prefecture "," Liangshan Yi Autonomous Prefecture "]," Shanxi Province ": [" Taiyuan City "," Datong "," Yangquan "," Changzhi "," Jincheng "," Shuozhou "," Jinzhong, "Yun City", "Xinzhou", "Linfen", "Luliang City"], "Inner Mongolia": ["Hohhot City", "Baotou", "Wuhai", "Chifeng", "Tongliao", "Eerduosi", "Holonbuyr", "Bayan nur City", "Wulanchabu City", "Hinggan League", "Xilin," Alxa League "]," Hainan Province ": [" Haikou "," Sanya "]," Chongqing ": [" Chongqing "]," Guizhou Province ": [" Guiyang "," Liupanshui "," Zunyi "," Anshun "," Tongren Area "," "the Buyi and Miao Autonomous Prefecture of southwest Guizhou", "Bijie Prefecture," southeast Guizhou Miao and Dong Autonomous Prefecture "," Qiannan Buyei and Miao Autonomous Prefecture "]," Gansu Province ": [" Lanzhou City "," Jiayuguan "," Jinchang "," Baiyin "," Tianshui "," Wuwei "," Zhangye "," Pingliang ", "Jiuquan", "Qingyang City", "Dingxi City", "Longnan," Linxia Hui Autonomous Prefecture "," Gannan Tibetan Autonomous Prefecture "]," Qinghai Province ": [" Xining City "," Haidong Prefecture "," Haibei Tibetan Autonomous Prefecture "," Huangnan Tibetan Autonomous Prefecture "," Hainan Tibetan Autonomous Prefecture "," Golog Tibetan Autonomous Prefecture "," Yushu Tibetan Ethnic Autonomous Prefecture, "sea Simon Haixi Tibetan Autonomous Prefecture"], "Ningxia Autonomous Region": ["Yinchuan", "Shizuishan", "Wuzhong", "Guyuan", "Zhongwei City"]}; function inievent () {var provul = document.getElementById ("Prov"); if (proVul) {var Allli = provul.getelementsbytagname ("Li"); for (i = 0; i < allli.length; i++) {node = allli[i]; node.onmous Eover = function () {//mouse over the display layer This.classname = "current";} Node.onmouseout = function () {//Hide layer when mouse leaves This.classname = This.className.replace ("Current", "");}}} function LoadData () {var provul = document.getElementById ("prov"); var nindex = 0; for (var key in Provs) {var Provli = Document.createelement ("Li"); Provli.id = "Provli" + nindex; provli.innerhtml = "<a href= ' # ' >" + key + "</a>"; Provul.appendchild (Provli); Add province Li//================ Add city ======================== var citys = Provs[key]; if (Citys.length > 0) {var Cityul = document.createelement ("ul"); var maxLength = 0;//The length of the largest city content, so that the maximum width of the Cityul can be set after To width adaptive for (var i = 0; i < citys.length i++) {var cityname = citys[i]; if (Cityname.length > MaxLength) {maxlengt h = cityname.length; Extract maximum length of the city} var Cityli = document.createelement ("Li"); Cityli.id = "Cityli" + i; Cityli.InnerHTML = "<a href= ' >" + cityname + "</a>"; Cityul.appendchild (Cityli); } if (MaxLength <= 6) {maxLength = +} else {maxLength = maxLength * 20;//This is multiplied by 20 mainly by a word 20px} maxLength = Maxle Ngth + "px"; Plus pixel px suffix cityul.style.width= maxLength; Set the maximum width of the Cityul provli.appendchild (Cityul); Add City ul} nindex++; } inievent (); Initialization event} </script> </head> <body onload = "LoadData ()" > <div id= "menu" > <ul id= "Prov" > < /ul> </div> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
