宜宾网站建设公司

JavaScript如何实现下拉菜单功能

这篇文章主要介绍了JavaScript如何实现下拉菜单功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

佛山网站建设公司成都创新互联公司,佛山网站设计制作，有大型网站制作公司丰富经验。已为佛山千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的佛山做网站的公司定做！

具体代码如下所示：

 
 
   
     
    下拉菜单 
     
      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; 
        } 
      } 
     
   
   
     
      请选择分类 
      
     
         
          ASP开发 
         
        
  •  
          .NET开发 
        
    •  
        
  •  
          PHP开发 
        
    •  
        
  •  
          Javascript开发 
        
    •  
        
  •  
          Java特效 
        
    •  
      
 
    
              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();          }        }           

1、要阻止事件冒泡

2、键盘事件，用index索引

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

感谢你能够认真阅读完这篇文章，希望小编分享的“JavaScript如何实现下拉菜单功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


本文标题：JavaScript如何实现下拉菜单功能
网站路径：http://ybzwz.com/article/posdsi.html

其他资讯