下拉列表的简单Demo

一、Html页面布局

<body>
  <div id="divselect">
    <cite>请选择分类</cite>
    <ul>
      <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
      <li><a href="javascript:;" selectid="2">.NET开发</a></li>
      <li><a href="javascript:;" selectid="3">PHP开发</a></li>
      <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
      <li><a href="javascript:;" selectid="5">Java开发</a></li>
    </ul>
  </div>
</body>

二、Css样式

body, ul, li {
  margin: 0;
  padding: 0;
  font-size: 13px;
}

ul, li {
  list-style: none;
}

#divselect {
  width: 186px;
  margin: 80px auto;
  position: relative;
  z-index: 10000;
}

#divselect cite {
  width: 150px;
  height: 24px;
  line-height: 24px;
  display: block;
  color: #807a62;
  cursor: pointer;
  font-style: normal;
  padding-left: 4px;
  padding-right: 30px;
  border: 1px solid #333333;
  /*background:url(xjt.png) no-repeat right center;*/
}
/*向下的三角箭头*/
cite:before {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: #888 transparent transparent transparent;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transform-origin: 50% 25%;
  -ms-transform-origin: 50% 25%;
  -moz-transform-origin: 50% 25%;
  -webkit-transform-origin: 50% 25%;
  -o-transform-origin: 50% 25%;
}

.extended cite:before {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

#divselect ul {
  width: 184px;
  border: 1px solid #333333;
  background-color: #ffffff;
  position: absolute;
  z-index: 20000;
  margin-top: -1px;
  display: none;
  overflow: hidden;
}

#divselect ul li {
  height: 24px;
  line-height: 24px;
}

#divselect ul li a {
  display: block;
  height: 24px;
  color: #333333;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
}

.animated {
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
}

.speed_fast {
  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  -ms-animation-duration: 0.2s;
}

.anim_extendDown {
  animation-name: extendDown;
  -webkit-animation-name: extendDown;
  -moz-animation-name: extendDown;
  -o-animation-name: extendDown;
  -ms-animation-name: extendDown;
}

@keyframes extendDown {
  0% {
    border-bottom-color: transparent;
    height: 0;
  }
  100% {
    border-bottom-color: #333;
    height: 120px;
  }
}

@-webkit-keyframes extendDown {
  0% {
    border-bottom-color: transparent;
    height: 0;
  }
  100% {
    border-bottom-color: #333;
    height: 120px;
  }
}

@-moz-keyframes extendDown {
  0% {
    border-bottom-color: transparent;
    height: 0;
  }
  100% {
    border-bottom-color: #333;
    height: 120px;
  }
}

@-o-keyframes extendDown {
  0% {
    border-bottom-color: transparent;
    height: 0;
  }
  100% {
    border-bottom-color: #333;
    height: 120px;
  }
}

@-ms-keyframes extendDown {
  0% {
    border-bottom-color: transparent;
    height: 0;
  }
  100% {
    border-bottom-color: #333;
    height: 120px;
  }
}

三、Js部分

window.onload = function(){
  var box = document.getElementById('divselect'),
      title = box.getElementsByTagName('cite')[0],
      menu = box.getElementsByTagName('ul')[0],
      as = box.getElementsByTagName('a'),
      index = -1;

  function resetA(){
    for(var i = 0; i < as.length; i++) {
      as[i].style.background = "#fff";
    }
  }

  function resetM() {
    box.className = '';
    menu.className = '';
    menu.style.display = "none";
    index = -1;
    resetA();
  }
  //点击显示选项列表
  title.onclick = function(event) {
    event = event || window.event;
    //兼容IE
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    //防止事件冒泡
    if(box.className == "extended"){
      resetM();
    } else {
      box.className = "extended";
      menu.className = "anim_extendDown animated speed_fast";
      menu.style.display = "block";
    }
  }
  //滑过滑出选项 改变样式 点击选择内容
  for(var i = 0; i < as.length; i++) {
    as[i].onmouseover = function() {
      resetA();
      this.style.background = "#ccc";
      index = this.getAttribute('selectid') - 1;
    }
    as[i].onclick = function() {
      resetM();
      title.innerHTML = this.innerHTML;
    }
  }
  //点击页面其他地方 隐藏选项列表
  document.onclick = function() {
    resetM();
  }
  //键盘点击事件
  document.onkeydown = function (e) {
    e = e || window.event;
    if(box.className == "extended"){
      if(e.keyCode == 40){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          index++;
          if(index > as.length - 1){
              index = 0;
          }
          resetA();
          as[index].style.backgroundColor = "#ccc";
      }else if(e.keyCode == 38){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          index--;
          if(index < 0){
              index = as.length - 1;
          }
          resetA();
          as[index].style.backgroundColor = "#ccc";
      }else if(e.keyCode == 13 && index != -1){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          title.innerHTML = as[index].innerHTML;
          index = -1;
          resetA();
          resetM();
      }
    }
  }
}

下拉列表的简单Demo

一、Html页面布局

二、Css样式

三、Js部分

推荐阅读更多精彩内容