编程挑战

最新推荐文章于 2024-07-30 17:09:59 发布

awan8718

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Lwei/p/5225532.html

版权

编程挑战

小伙伴们，根据所学知识，实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题

效果图:

初始：

点击三角：

点击选中项：

提示:
1、 声明一个全局的index变量初值为-1
2、 按下向下方向键时index递增，当递增至大于等于菜单选项的总数时恢复为0
3、 按下向上方向键时判断index，如若小于等于0则设为菜单选项的总数，之后递减index
4、 根据index值将对应的选项设为当前（灰色背景）
5、 按下回车键时将对应选中的选项设为菜单标题，且将所有选项设为无背景，index恢复为-1，菜单收起

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>下拉菜单</title>
  6 <style type="text/css">
  7 body,ul,li{ margin:0; padding:0; font-size:13px;}
  8 ul,li{list-style:none;}
  9 #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;}
 10 #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
 11 padding-left:4px; padding-right:30px; border:1px solid #333333; 
 12 /*background:url(xjt.png) no-repeat right center;*/}
 13 #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
 14 #divselect ul li{height:24px; line-height:24px;}
 15 #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
 16 </style>
 17 <script type="text/javascript">
 18 window.onload=function(){
 19     var box=document.getElementById('divselect'),
 20         title=box.getElementsByTagName('cite')[0],
 21         menu=box.getElementsByTagName('ul')[0],
 22         as=box.getElementsByTagName('a'),
 23         index=-1;
 24    
 25     // 点击三角时
 26     title.onclick=function(event){
 27       event = event||window.event;
 28       menu.style.display = 'block';
 29       if(event.stopPropagation){
 30          event.stopPropagation(); 
 31       }else{
 32          event.cancelBubble = true;          
 33       }
 34       document.onkeyup = function(event){
 35         event = event||window.event;
 36         if(event.keyCode==40){
 37             index++;
 38             if(index>=as.length) index=0;
 39             for(var i=0; i<as.length;i++){
 40               as[i].style.background = '#fff';
 41             }
 42             as[index].style.background = '#ccc';
 43         } 
 44         if(event.keyCode==38){
 45             index--;
 46             if(index<0) index=as.length-1;
 47             for(var i=0; i<as.length;i++){
 48               as[i].style.background = '#fff';
 49             }
 50             as[index].style.background = '#ccc';
 51         }
 52         if(event.keyCode==13){
 53             for(var i=0; i<as.length;i++){
 54               as[i].style.background = '#fff';
 55             }
 56             title.innerHTML = as[index].innerHTML;
 57             menu.style.display = 'none';
 58         }  
 59       }
 60     }  
 61 
 62        // 滑过滑过、离开、点击每个选项时
 63      for(var i=0;i<as.length;i++){
 64         as[i].num=i;
 65         as[i].onmouseover=function(){
 66            this.style.background="#ccc";
 67            index=as[i].num-1;
 68         }
 69      as[i].onmouseout = function(){
 70             this.style.background = '#fff'     
 71          }
 72          as[i].onclick = function(event){
 73             event = event||window.event;
 74             if(event.stopPropagation){
 75                event.stopPropagation(); 
 76             }else{
 77                event.cancelBubble = true;          
 78             }
 79             menu.style.display = 'none';
 80             title.innerHTML = this.innerHTML;     
 81          }  
 82       }
 83        // 点击页面空白处时
 84       document.onclick = function(){
 85          menu.style.display = 'none'; 
 86       }
 87  }
 88 </script>
 89 </head>
 90 <body>
 91     <div id="divselect">
 92       <cite>请选择分类</cite>
 93       <ul>
 94          <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
 95          <li><a href="javascript:;" selectid="2">.NET开发</a></li>
 96          <li><a href="javascript:;" selectid="3">PHP开发</a></li>
 97          <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
 98          <li><a href="javascript:;" selectid="5">Java特效</a></li>
 99       </ul>
100     </div>
101 </body>
102 </html>

posted on 2016-02-28 20:24 一人行者阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/Lwei/p/5225532.html

awan8718

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编程挑战

编程挑战小伙伴们，根据所学知识，实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题效果图:初始：点击三角：...
复制链接

扫一扫