CSS+js下拉菜单,想填加按钮事件，做成像Mozilla官方网站那样的效果

$(document).ready(function() {
2 if ($('#nav-main').length === 0) {
3 return;
4 }
5
6 var main_menuitems = $('#nav-main [tabindex="0"]');
7 var prev_li, new_li;
8
9 $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
10 new_li = $(this);
11 if (!prev_li || prev_li.attr('id') !== new_li.attr('id')) {
12 // Open the menu
13 new_li.addClass('hover').find('[role="menu"]').attr('aria-expanded', 'true');
14 if (prev_li) {
15 // Close the last selected menu
16 prev_li.dequeue();
17 }
18 } else {
19 prev_li.clearQueue();
20 }
21 }).bind('mouseout focusout', function(event) {
22 prev_li = $(this);
23 prev_li.delay(100).queue(function() {
24 if (prev_li) {
25 prev_li.clearQueue();
26 // Close the menu
27 prev_li.removeClass('hover').find('[role="menu"]').attr('aria-expanded', 'false');
28 prev_li = null;
29 }
30 });
31 }).each(function(menu_idx) {
32 var menu = $(this).find('[role="menu"]');
33 var menuitems = $(this).find('a');
34
35 menuitems.mouseover(function(event) {
36 this.focus(); // Sometimes $(this).focus() doesn"t work
37 }).each(function(item_idx) {
38 // Enable keyboard navigation
39 $(this).keydown(function(event) {
40 var target;
41 switch (event.keyCode) {
42 case 33: // Page Up
43 case 36: // Home
44 target = menuitems.first();
45 break;
46 case 34: // Page Down
47 case 35: // End
48 target = menuitems.last();
49 break;
50 case 38: // Up
51 target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
52 : menuitems.last();
53 break;
54 case 40: // Down
55 target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
56 : menuitems.first();
57 break;
58 case 37: // Left
59 target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
60 : main_menuitems.last();
61 break;
62 case 39: // Right
63 target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
64 : main_menuitems.first();
65 break;
66 }
67 if (target) {
68 target.get(0).focus(); // Sometimes target.focus() doesn't work
69 return false;
70 }
71 return true;
72 });
73 });
74 });
75 一共75行 长么。既然是学习，看看吧