本文實例講述了javascript實現dom動態創建省市縱向列表菜單的方法。分享給大家供大家參考。具體實現方法如下：
<!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>動態創建縱向列表</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; position:relative; }#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px;border:1px solid #ccc; border-bottom:none; }#menu ul li.current ul { display:block;} #menu ul li ul li{text-align:center;} /*設置城市內容居中*/</style><script type="text/javascript">var provs = { "江西省": ["南昌市", "景德鎮", "九江", "鷹潭", "萍鄉", "新馀", "贛州", "吉安", "宜春", "撫州", "上饒"], "福建省": ["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"], "河北省": ["石家莊", "邯鄲", "邢臺", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"], "四川省": ["成都市", "自貢市", "攀枝花市", "瀘州市", "德陽市", "綿陽市", "廣元市", "遂寧市", "內江市", "樂山市", "南充市", "眉山市", "宜賓市", "廣安市", "達州市", "雅安市", "巴中市", "資陽市", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"], "山西省": ["太原市", "大同市", "陽泉市", "長治市", "晉城市", "朔州市", "晉中市", "運城市", "忻州市", "臨汾市", "呂梁市"], "內蒙古": ["呼和浩特市", "包頭市", "烏海市", "赤峰市", "通遼市", "鄂爾多斯市", "呼倫貝爾市", "巴彥淖爾市", "烏蘭察布市", "興安盟", "錫林郭勒盟", "阿拉善盟"], "海南省": ["海口市", "三亞市"], "重慶市": ["重慶"], "貴州省": ["貴陽市", "六盤水市", "遵義市", "安順市", "銅仁地區", "黔西南布依族苗族自治州", "畢節地區", "黔東南苗族侗族自治州", "黔南布依族苗族自治州"], "甘肅省": ["蘭州市", "嘉峪關市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平涼市", "酒泉市", "慶陽市", "定西市", "隴南市", "臨夏回族自治州", "甘南藏族自治州"], "青海省": ["西寧市", "海東地區", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉樹藏族自治州", "海西蒙古族藏族自治州"], "寧夏自治區": ["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛市"]};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.onmouseover = function () { //鼠標經過時顯示層 this.className = "current"; } node.onmouseout = function () { //鼠標離開時隱藏層 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); //添加省份li //================添加城市======================== var citys = provs[key]; if (citys.length > 0) { var cityUL = document.createElement("ul"); var maxLength = 0; //存放最大城市內容的長度，以便后面設置cityUL的最大寬度，達到寬度自適應 for (var i = 0; i < citys.length; i++) { var cityName = citys[i]; if (cityName.length > maxLength) { maxLength = cityName.length; //提取最大長度的城市 } var cityLI = document.createElement("li"); cityLI.id = "cityLI" + i; cityLI.innerHTML = "<a href='#'>" + cityName + "</a>"; cityUL.appendChild(cityLI); } if (maxLength <= 6) { maxLength = 100; } else { maxLength = maxLength * 20; //這里乘以20主要是按一個字20px來算 } maxLength = maxLength + "px"; //加上像素的px后綴 cityUL.style.width= maxLength; //設置cityUL的最大寬度 provLi.appendChild(cityUL); //添加城市UL } nIndex++; } iniEvent(); //初始化事件}</script></head><body onload ="loadData()"><div id="menu"><ul id="prov"></ul></div> </body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
