js笔记:模拟下拉列表

4th 8月 2008, 05:42 下午

html部分

  1. <div id="select">
  2.     <div id="selectHead">First</div>
  3.     <ul id="csList">
  4.         <li class="cs">First</li>
  5.         <li>Seconde</li>
  6.         <li>Third</li>
  7.     </ul>
  8. </div>

css部分

  1. *{padding:0;margin:0;}
  2. body{font:12px Arial;}
  3. #select{width:100px;}
  4. #select #selectHead{border:1px solid #ccc;line-height:20px;cursor:pointer;}
  5. #select ul{border:1px solid #ccc;border-top:0;display:none;}
  6. #select ul li{line-height:20px;cursor:default;}
  7. #select .onhover{background:#0069ca;color:#fff;}

javascript部分

  1. <script type="text/javascript">
  2.     function select(){
  3.         var selectHead = document.getElementById("selectHead");
  4.         var csList = document.getElementById("csList");
  5.         selectHead.onclick = function(){
  6.             if (csList.style.display != "block") {
  7.                 csList.style.display = "block";
  8.             }
  9.             else {
  10.                 csList.style.display = "none";
  11.             }
  12.         }
  13.         var optionList = csList.getElementsByTagName("li");
  14.         for(var i = 0;i < optionList.length;i++){
  15.             optionList[i].onclick = function(event){
  16.                 if (!event) {
  17.                     event = window.event;
  18.                 }
  19.                 el = event.target || event.srcElement;
  20.                 var csContent = el.innerHTML;
  21.                 selectHead.innerHTML = csContent;
  22.                 csList.style.display = "none";
  23.             }
  24.             optionList[i].onmouseover = function(event){
  25.                 if (!event) {
  26.                     event = window.event;
  27.                 }
  28.                 el = event.target || event.srcElement;
  29.                 addCss(el,"onhover");
  30.             }
  31.             optionList[i].onmouseout = function(event){
  32.                 if (!event) {
  33.                     event = window.event;
  34.                 }
  35.                 el = event.target || event.srcElement;
  36.                 removeCss(el,"onhover");
  37.             }
  38.         }
  39.     }
  40.     function addCss(element,cssName){
  41.         var element,cssName;
  42.         if (!element.className || element.className == cssName){
  43.             element.className = cssName;
  44.         }
  45.         else{
  46.             element.className = element.className + " " + cssName;
  47.         }
  48.     }
  49.     function removeCss(element,cssName){
  50.         var element,cssName;
  51.         var oldCss = element.className;
  52.         var cssList = oldCss.split(" ");
  53.         for(var i = 0;i < cssList.length;i++){
  54.             if (cssList[i] == cssName) {
  55.                 cssList[i] = "";
  56.                 break;
  57.             }
  58.         }
  59.         element.className = cssList.join(" ");
  60.     }
  61.     window.onload = select;
  62. </script>

查看效果

分类： js笔记  |  1 条评论