Home > Article > Web Front-end > Classic_Use js to quickly implement mouse and keyboard selection drop-down menu (detailed code explanation)

Classic_Use js to quickly implement mouse and keyboard selection drop-down menu (detailed code explanation)

php是最好的语言Original: 2018-07-25 10:07:231633browse

It took a few hours to sort out the code, how to use js to implement mouse selection and keyboard operation drop-down menu, a very classic case practice. js changes the font color and background when the mouse passes over, and then displays the drop-down menu. Normally, the drop-down menu is hidden.

<!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;}
  #pselect{width:186px; margin:80px auto; position:relative; z-index:10000;}
  #pselect 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;}
    #pselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
    #pselect ul li{height:24px; line-height:24px;}
    #pselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
  </style>
  <script type="text/javascript">
    window.onload=function(){
     var box=document.getElementById(&#39;pselect&#39;),
     title=box.getElementsByTagName(&#39;cite&#39;)[0],
     menu=box.getElementsByTagName(&#39;ul&#39;)[0],
     as=box.getElementsByTagName(&#39;a&#39;),
     index=-1;
     
    // 点击三角时   // 执行脚本
    //显示选项面板
    title.onclick=function(event){
      
      event = event || window.event;//控制浏览器兼容
      //取消冒泡事件
          if(event.stopPropagation){//非ie
            event.stopPropagation();
          }else{
            event.cancleBubble = true;//ie
          }
          menu.style.display = "block";
          document.onkeydown = function(e){
            e = e || window.event;
            if(e.keyCode == 38){//下键
              index++;
              if(index == as.length){
                index = 0;
              }
              resetAs();
              as[index].style.background = "#567";
            }else if(e.keyCode == 40){//上键
              index--;
              if(index<0){
                index = as.length - 1;
              }
              resetAs();
              as[index].style.background = "#567";
            }else if(e.keyCode == 13){ //enter键
              e.preventDefault?e.preventDefault():e.returnValue = false;
              title.innerHTML = as[index].innerHTML;
              index = -1;
              menu.style.display = "none";
              resetAs();
            }
          }
          
          
        }  
        
        /*重置所有选项的背景*/

        function resetAs(){
          for(var i = 0,l = as.length;i<l;i++){
            as[i].style.background = "#FFF";
          }
        }
        
   // 滑过滑过、离开、点击每个选项时
   
      // 执行脚本
      for(var i = 0;i<as.length;i++){
        as[i].onmouseover = function(){
          this.style.background = "#567";
        };
        as[i].onmouseout = function(){
          this.style.background = "#FFF";
        };
        as[i].onclick = function(event){
          //取消冒泡事件
          if(event.stopPropagation){//非ie
            event.stopPropagation();
          }else{
            event.cancleBubble = true;//ie
          }
          title.innerHTML = this.innerHTML;
          menu.style.display = "none";
        }
        
      }
      
      
       // 点击页面空白处时 隐藏选项面板
       // 执行脚本
       document.onclick = function(){
        menu.style.display = "none";
      }
      

      
    }
  </script>
</head>
<body>
 <p id="pselect">
  <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>
</p>
</body>
</html>

Related recommendations:

Use Javascript to move and sort select drop-down menus_jquery

Video tutorial: Various drop-down menus accomplish

The above is the detailed content of Classic_Use js to quickly implement mouse and keyboard selection drop-down menu (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!

JavaScript JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the use of js secondary encapsulation array (code)Next article：Introduction to the use of js secondary encapsulation array (code)

See more

Classic_Use js to quickly implement mouse and keyboard selection drop-down menu (detailed code explanation)

Related articles