JavaScript下拉菜单功能实例代码

本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/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;
      }
      #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: .3s;
        /*-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;
        }
      }
    </style>
  </head>
  <body>
    <div id="divselect">
      <cite>请选择分类</cite>
      <ul>
        <li id="li">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="1">ASP开发</a>
        </li>
        <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET开发</a>
        </li>
        <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP开发</a>
        </li>
        <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript开发</a>
        </li>
        <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">Java特效</a>
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      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 resetM() {
          box.className = "";
          menu.className = "";
          menu.style.display = "none";
          index = -1;
          resetA();
        }
        //清空a选项样式
        function resetA() {
          for(var i = 0; i < as.length; i++) {
            as[i].style.background = "#fff";
          }
        }
        // 点击三角时
        title.onclick = function(event) {
          //阻止事件冒泡
          event = event || window.event;
          event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
          if(box.className == "extended") {
            resetM();
          } else {
            box.className = "extended"; //给box加类名让三角旋转
            menu.className = "animated speed_fast anim_extendDown"; //下拉菜单的下拉动画
            menu.style.display = "block";
          }
        }
        document.onkeydown = function(event) {
          event = event || window.event;
          if(box.className == "extended") {
            if(event.keyCode == 38) { //向上键
              event.preventDefault ? event.preventDefault() : event.returnValue = false;
              index--;
              if(index == -1) {
                index = as.length - 1;
              }
              resetA();
              as[index].style.background = "#ccc";
            } else if(event.keyCode == 40) { //向下键
              event.preventDefault ? event.preventDefault() : event.returnValue = false;
              index++;
              if(index == as.length) {
                index = 0;
              }
              resetA();
              as[index].style.background = "#ccc";
            } else if(event.keyCode == 13) { //回车键
              event.preventDefault ? event.preventDefault() : event.returnValue = false;
              title.innerHTML = as[index].innerHTML;
              resetM();
            }
          }
        }
        // 滑过滑过、离开、点击每个选项时
        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();
        }
      }
    </script>
  </body>
</html> 

1、要阻止事件冒泡

2、键盘事件，用index索引

3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式

以上所述是小编给大家介绍的JavaScript下拉菜单功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！