背景：
当前现状，通过鼠标操作、hover到功能模块，出现下拉菜单，移除鼠标，隐藏下拉菜单
无障碍访问需求点
- 使用键盘键tab，切换各个模块
- 如果有下拉菜单，按键盘键enter，出现下拉菜单、按键盘键tab，切换下拉框菜单项
- 还有一种方式，省略enter键盘，tab选中功能模块，下拉菜单显示，继续tab，切换下拉框菜单项
实现
先搞清楚两件事，”tab切换各模块“，实际是触发元素focus事件，enter键触发元素click事件
选中效果：浏览器自带样式、a标签不能设置：focus，outline:none，如下
a {
// 需要注释掉下面代码
// &:focus {outline: none; }}
公共实现
<div class="" id="m_nav"> <ul id="navigationRegion"> <li token="1"><a title="首页" href="javascript:void(0)">首页</a></li> <li token="2" class="home"> <a title="我的时光" href="javascript:void(0)">我的时光</a> <div class="i_n_l child"> <h5><a href="//my.mtime.com">我的时光</a></h5> <h5><a href="//my.mtime.com/movie/wish/">我的电影</a></h5> <h5><a href="//my.mtime.com/friend/">我的好友</a></h5> </div> </li> <li token="3"><a title="第二页" href="//www.mtime.com/">第二页</a></li> </ul> </div>
<style type="text/css"> #m_nav{ font-size:12px; position:relative; } #m_nav #navigationRegion::after{ content:"copyright mtime"; height:0; visibility:hidden; display:block; clear:both; } #m_nav li{ height:41px; float:left; display:inline; font-size:1.2em; line-height:41px; text-align:center; letter-spacing:1px; position:relative; } #m_nav li a{ font-weight:bold; text-decoration:none; } #m_nav li.home{ width:73px; padding-right:24px; position:relative; text-align:right; } .i_n_l h5{ height:26px; line-height:26px; margin:0 4px; border-bottom:1px solid #2f2e20; width:118px; overflow:visible!important; overflow:hidden; } .i_n_l{ position:absolute; top:41px; left:0; width:126px; border:1px solid #928f65; font-size:1.1em; display:none; } .home_hover .i_n_l{ display:block; } </style>
需求点2实现
<script> var o = document.getElementById("navigationRegion").getElementsByTagName("li"); var l = o.length, cache; var menuTaga = function(obj){ //获取a标签DOM对象 return obj.getElementsByTagName("a")[0]; }, menuDown = function(obj){ var cl = obj.className; if(/_on$/.test(cl) || /_hover$/.test(cl)){ return; } obj.className = obj.className + "_hover"; }, menuUp = function(obj){ obj.className = obj.className.replace("_hover", ""); }, menuCache = function(obj){ if(cache){ menuUp(cache); } cache = obj; }, menuEvent = function(obj){ obj.onmouseover = function(){ menuCache(this); return menuDown(this); }; obj.onmouseout = function(){ return menuUp(this); }; menuTaga(obj).onfocus = function(){ console.log('onfocus===') menuCache(obj); return menuDown(obj); }; }; for(var i=0; i<l; i+=1){ menuEvent(o[i]); } </script>
需求点3实现
<script> var o = document.getElementById("navigationRegion").getElementsByTagName("li"); var l = o.length, cache; var menuTaga = function(obj){ //获取a标签DOM对象 return obj.getElementsByTagName("a")[0]; }, menuDown = function(obj){ var cl = obj.className; if(/_on$/.test(cl) || /_hover$/.test(cl)){ return; } obj.className = obj.className + "_hover"; }, menuUp = function(obj){ obj.className = obj.className.replace("_hover", ""); }, menuCache = function(obj){ if(cache){ menuUp(cache); } cache = obj; }, menuEvent = function(obj){ obj.onmouseover = function(){ menuCache(this); return menuDown(this); }; obj.onmouseout = function(){ return menuUp(this); }; menuTaga(obj).onfocus = function(){ console.log('onfocus===') menuCache(obj); }; menuTaga(obj).onclick = function(){ console.log('click===') menuCache(obj); return menuDown(obj); }; }; for(var i=0; i<l; i+=1){ menuEvent(o[i]); } </script>
