JS下拉菜单实与可访问性问题的一些思考.docxVIP

张鑫旭在其 HYPERLINK /wordpress/?jdfwkey=vsgpx 个人网站上发表了一篇文章《 HYPERLINK /wordpress/?p=1087jdfwkey=spc9h1 JS下拉菜单实现与可访问性问题的一些思考》，文中为我们分享了他对于JS下拉菜单实现与可访问性问题的一些思考及实际经验，现转载于此，供大家借鉴学习。全文如下： 一、俗耐的开篇语 关于下拉菜单的可用性问题，我之前一直都是忽略的，可以说是不知道，常常仅仅止步于眼前的效果上。前段时间看到了Roger的“ HYPERLINK /accessibility/accessing-nav-drop-downs/ \t _blank Accessing Nav Drop-Downs”一文，就是讲了下下拉菜单的可用性问题。同时，巧的是，最近在看淘宝UED翻译的《ppk谈JavaScript》一书，其多次提到了可访问性的问题，尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。 这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访问性，于是开始结合实际情况，思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考，仅用于交流。再具体讲述下拉菜单的可访问性之前，先简单说说下拉菜单以及下拉菜单的实现吧。 二、关于下拉菜单及其实现 HYPERLINK /view/1143846.htm \t _blank 百度百科对“下拉菜单”一词的解释是：以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成，一般作为应用系统的主菜单使用。不过这段话就像《盗梦空间》一样，让人很难懂。通俗点讲，就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在Web上非常之常见，例如，我随便打开个页面，啊，就像是我浏览器现在显示的百科的页面的右上角： 或是隔壁的微博页面，啊，果然，看左上角的广场下拉： 恩恩，看来下拉菜单就像是男人一样，满地都是。就不一一举例了，关于下拉菜单的实现，那方法可就多了，class切换，属性绑定，js定位等，不同的页面，不同的设计，不同的架构，就有不同的实现方法。由于每个项目，每个页面的情况都不一样，所以，不能轻易的下结论，你是大熊猫，是国宝，它是小野猫，是杂草。但是，就可用性而言，不同的方法优劣还是有标准来评判的，这个在后面会自然而然的展示。 现在，举个切换class实现下拉效果的简单例子，实例菜单原型来自 HYPERLINK / \t _blank Mtime时光网，（作者注：Mtime创始人在新浪微博上很活跃，你有兴趣可以follow他，@马日拉，你有没有觉得这个名字很有遐想的空间呢？）截图如下： 此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示： 当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载好的，于是，我们就可以通过简单的class切换实现下拉效果。 首先是HTML结构，见下图： ? 核心CSS代码如下： .i_n_l{display:none;} ? .showtime_hover?.i_n_l,.quiz_hover?.i_n_l,.home_hover?.i_n_l,.movie_hover?.i_n_l, .tv_hover?.i_n_l,.person_hover?.i_n_l,.blog_hover?.i_n_l,.group_hover?.i_n_l{display:block;}? 可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面： script ? ????var?o?=?document.getElementById(navigationRegion).getElementsByTagName(li); ? ????var?l?=?o.length; ? ????for(var?i=0;?il;?i+=1){ ? ????????o[i].onmouseover?=?function(i){ ? ????????????var?cl?=?o[i].className; ? ????????????if(/_on$/.test(cl)){ ? ??????????????????return; ? ????????????} ? ????????????o[i]