這篇文章主要介紹了javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法,可實(shí)現(xiàn)省市列表菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面處理json數(shù)據(jù)的技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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>動(dòng)態(tài)創(chuàng)建縱向列表</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;}  /*設(shè)置城市內(nèi)容居中*/
</style>
<script type="text/javascript">
var provs = { "江西省": ["南昌市", "景德鎮(zhèn)", "九江", "鷹潭", "萍鄉(xiāng)", "新馀", "贛州", "吉安", "宜春", "撫州", "上饒"],
  "福建省": ["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"],
  "河北省": ["石家莊", "邯鄲", "邢臺(tái)", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"],
  "四川省": ["成都市", "自貢市", "攀枝花市", "瀘州市", "德陽(yáng)市", "綿陽(yáng)市", "廣元市", "遂寧市", "內(nèi)江市", "樂(lè)山市", "南充市", "眉山市", "宜賓市", "廣安市", "達(dá)州市", "雅安市", "巴中市", "資陽(yáng)市", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"],
  "山西省": ["太原市", "大同市", "陽(yáng)泉市", "長(zhǎng)治市", "晉城市", "朔州市", "晉中市", "運(yùn)城市", "忻州市", "臨汾市", "呂梁市"],
  "內(nèi)蒙古": ["呼和浩特市", "包頭市", "烏海市", "赤峰市", "通遼市", "鄂爾多斯市", "呼倫貝爾市", "巴彥淖爾市", "烏蘭察布市", "興安盟", "錫林郭勒盟", "阿拉善盟"],
  "海南省": ["海口市", "三亞市"], "重慶市": ["重慶"], 
  "貴州省": ["貴陽(yáng)市", "六盤水市", "遵義市", "安順市", "銅仁地區(qū)", "黔西南布依族苗族自治州", "畢節(jié)地區(qū)", "黔東南苗族侗族自治州", "黔南布依族苗族自治州"],
  "甘肅省": ["蘭州市", "嘉峪關(guān)市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平?jīng)鍪?, "酒泉市", "慶陽(yáng)市", "定西市", "隴南市", "臨夏回族自治州", "甘南藏族自治州"],
  "青海省": ["西寧市", "海東地區(qū)", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉樹藏族自治州", "海西蒙古族藏族自治州"],
  "寧夏自治區(qū)": ["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛(wèi)市"]
};
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 () { //鼠標(biāo)經(jīng)過(guò)時(shí)顯示層
        this.className = "current";
      }
      node.onmouseout = function () { //鼠標(biāo)離開時(shí)隱藏層
        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; //存放最大城市內(nèi)容的長(zhǎng)度，以便后面設(shè)置cityUL的最大寬度，達(dá)到寬度自適應(yīng)
      for (var i = 0; i < citys.length; i++) {
        var cityName = citys[i];
        if (cityName.length > maxLength) {
          maxLength = cityName.length; //提取最大長(zhǎng)度的城市
        }
        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主要是按一個(gè)字20px來(lái)算
      }
      maxLength = maxLength + "px"; //加上像素的px后綴
      cityUL.style.width= maxLength; //設(shè)置cityUL的最大寬度
      provLi.appendChild(cityUL); //添加城市UL
    }
    nIndex++;
  }
  iniEvent();  //初始化事件
}
</script>
</head>
<body onload ="loadData()">
<div id="menu">
<ul id="prov">
</ul>
</div>  
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: