HTML+CSS+JavaScript實現簡易下拉選單
阿新 • • 發佈：2018-12-23
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表</title> <link rel="stylesheet" href="css/reset.css" type="text/css"> <style type="text/css"> *{ padding: 0; margin: 0; } body{ background: #333; font: 16px/32px "微軟雅黑"; } #box{ width: 500px; height: 326px; border: 3px solid #000; background: #ffffff; /*margin: 40px auto;*/ /*本身是一個層*/ position: absolute; left: 50%; top:50%; margin: -163px 0 0 -250px; } .province{ width: 320px; height: 42px; background: #c00; margin: 80px auto; position: relative; } .province strong{ width: 64px; height: 42px; line-height: 42px; display: block; float: left; color: #ffffff; padding-left: 10px; } #selectProvince{ display: block; float: left; width: 200px; height: 28px; background: #ffffff url("image/province_sprites.png") no-repeat 190px 1px; margin-top: 7px; padding-left: 8px; color: #ccc; cursor: pointer; } #allProvince{ width: 318px; height: auto; line-height: 30px; clear: both; position: absolute; top: 42px; left: 0; background: #ffffff; border: 1px solid #dfdfdf; display: none; z-index: 101; } #allProvince li{ height: 30px; border-bottom: 1px solid #dfdfdf; } #allProvince li b{ font-weight: bold; width: 40px; /**/ display: inline-block; text-align: center; } #allProvince li span{ padding-right: 15px; cursor: pointer; } #allProvince li span:hover{ color: #c00; } #layer{ width: 100%; height: 100%; background: #fff; position: absolute; top:0; left: 0; z-index: 100; filter: alpha(opacity=0); opacity: 0; display: none; } .show{ color: #cccccc; background-position: 190px -17px; } .hide{ color: #000; background-position: 190px 1px; } </style> </head> <body> <div id="box"> <div class="province"> <strong>送貨至:</strong> <span id="selectProvince">北京</span> <ul id="allProvince"> <li><b>A</b><span>安徽</span><span>安陽</span></li> <li><b>B</b><span>北京</span></li> <li><b>C</b><span>重慶</span></li> <li><b>D</b><span>東北</span></li> <li><b>F</b><span>福建</span></li> <li><b>N</b><span>南京</span></li> <li><b>G</b><span>廣東</span><span>廣西</span></li> <li><b>T</b><span>天津</span></li> <li><b>H</b><span>湖南</span><span>河南</span><span>黑龍江</span></li> <li><b>Z</b><span>鄭州</span></li> <li><b>S</b><span>上海</span><span>山東</span></li> </ul> </div> </div> <div id="layer"> </div> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function getDOM(id) { return document.getElementById(id); } function showProvince() { getDOM("selectProvince").onclick=showAllProvince; getDOM("layer").onclick=function () { hideAllProvince(); }; } function showAllProvince() { getDOM("allProvince").style.display="block"; getDOM("layer").style.display="block"; getDOM("selectProvince").className="show"; setectProvice(); } function hideAllProvince() { getDOM("allProvince").style.display="none"; getDOM("layer").style.display="none"; getDOM("selectProvince").className="hide"; } function setectProvice() { var pro=getDOM("allProvince").getElementsByTagName("li"); var links; for (var i=0;i<pro.length;i++){ links=pro[i].getElementsByTagName("span"); for (var j=0;j<links.length;j++){ links[j].onclick=function () { getDOM("selectProvince").innerHTML=this.innerHTML; hideAllProvince(); } } } } addLoadEvent(showProvince); </script> </body> </html>