首页>>导航菜单>>点击展开与关闭的下拉菜单(2015-10-15)

点击展开与关闭的下拉菜单

点击展开与关闭的下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.   
  3.         var Dropdown = (function($) {  
  4.   
  5.           var $body = $('body'),  
  6.             $dropdown = $body.find('.dropdown'),  
  7.             $trigger = $dropdown.find('button'),  
  8.             $list = $dropdown.find('ul'),  
  9.             $firstLink = $list.find('li:first a'),  
  10.             $lastLink = $list.find('li:last a');  
  11.   
  12.           var init = function() {  
  13.             ariaSetup();  
  14.             bindEvents();  
  15.           }  
  16.   
  17.           var ariaSetup = function() {  
  18.             var listId = $list.attr('id');  
  19.   
  20.             $trigger.attr({  
  21.               'aria-expanded': 'false',  
  22.               'aria-controls': listId  
  23.             });  
  24.   
  25.             $list.attr({  
  26.               'aria-hidden': true  
  27.             });  
  28.           }  
  29.   
  30.           var bindEvents = function() {  
  31.             $trigger.on('click', toggleDropdown);  
  32.   
  33.             $firstLink.on('keydown', function() {  
  34.               if (event.which === 9 && event.shiftKey === false) {  
  35.                 return;  
  36.               } else if (event.which === 9 && event.shiftKey === true) {  
  37.                 toggleDropdown();  
  38.               }  
  39.             });  
  40.   
  41.             $lastLink.on('keydown', function() {  
  42.               if (event.shiftKey) return;  
  43.               toggleDropdown();  
  44.             });  
  45.           }  
  46.   
  47.           var toggleDropdown = function() {  
  48.             var hidden = $list.attr('aria-hidden') === 'true' ? false : true,  
  49.               expanded = !hidden;  
  50.   
  51.             $trigger.attr('aria-expanded', expanded);  
  52.             $list.attr('aria-hidden', hidden);  
  53.           }  
  54.   
  55.           return {  
  56.             init: init  
  57.           }  
  58.   
  59.         })(jQuery);  
  60.   
  61.         Dropdown.init();  
  62. </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_512.html