Maison > Article > interface Web > Classic_Use js pour implémenter rapidement le menu déroulant de sélection de la souris et du clavier (explication détaillée du code)

Classic_Use js pour implémenter rapidement le menu déroulant de sélection de la souris et du clavier (explication détaillée du code)

php是最好的语言original: 2018-07-25 10:07:231631parcourir

J'ai passé quelques heures à trier le code, comment utiliser js pour implémenter le menu déroulant de sélection de la souris et de fonctionnement du clavier, un cas pratique très classique. js change la couleur de la police et l'arrière-plan lorsque la souris passe dessus, puis affiche le menu déroulant. Normalement, le menu déroulant est masqué.

<!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>

Recommandations associées :

Utilisation de Javascript pour déplacer et trier les menus déroulants sélectionnés_jquery

Tutoriel vidéo : Divers Drop- mise en œuvre du menu déroulant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'utilisation du tableau d'encapsulation secondaire js (code)Article suivant：Introduction à l'utilisation du tableau d'encapsulation secondaire js (code)

Articles Liés

Voir plus