javascript實現dom動態創建省市縱向列表菜單的方法

2024-05-06 16:20:14

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript實現dom動態創建省市縱向列表菜單的方法,可實現省市列表菜單效果,涉及javascript鼠標事件及頁面處理json數據的技巧,需要的朋友可以參考下

本文實例講述了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>