程式設計挑戰 下拉列表

我把題目要求再貼一下:

小夥伴們，根據所學知識，實現下圖所示的選單效果，實現點選選單中的向下三角展開選單，點選頁面空白處收起選單，按下鍵盤上的向上、向下方向鍵可以選中對應的選項，滑鼠點選或按下回車鍵將當前高亮的選項內容設為選單的標題

初始：

點選出現:

點選之後：

要求就這麼多，我看到小夥伴們實現的都差不多，無非就是乙個乙個的迴圈邦定事件。完全是按提示做的，沒有自己的創新。

下面我貼下自己的**：

/*

*       *  下拉列表
*  @param  id 節點#id
*/function
selecter (id) 
/*** 初始化
*/selecter.prototype.init = function
()      /**
* 事件處理
* @param  event 事件物件
*/selecter.prototype.handleevent = function
(event)
break
;            
//點選頁面空白處時
case 'html':
this
.menuhide();
break
;          
//鍵盤操作
default
:            
this
.keydown(event.keycode);
break
;        }
return
}      /**
*  更新選單值
*/selecter.prototype.menuupdate = function
()      /**
* 高亮選中項
*/selecter.prototype.hightlight = function
()      }
/*** 移除高亮
*/selecter.prototype.removelight = function
()      }
/*** 顯示選單項
*/selecter.prototype.menushow = function
()      /**
* 隱藏選單項
*/selecter.prototype.menuhide = function
()      /**
* 取下一項
*/selecter.prototype.next= function
()      /**
* 取上一項
*/selecter.prototype.prev = function
()      /**
*  鍵盤操作
* @param  code assic碼
*/selecter.prototype.keydown = function
(code)
}//呼叫
window.onload=function
()

1：對於呼叫者來說，不需要關心下拉框內部的節點和實現邏輯。只要傳入乙個id就可以了。

2: 整個下拉列表看成是乙個物件，每次對選單進行什麼操作，在物件內部都可以進行儲存。避免進行不必要的節點查詢操作。

3: 事件邦在根節點上，通過冒泡進行監聽，即節省**又可以有效提高效能。

4：**按功能進行編寫，結構清晰，擴充套件和維護方便。

以上就是王婆賣瓜，歡迎吐糟。

JS級聯下拉列表，DOM程式設計

建立新節點 document.createelement div document.createattribute class document.createtextnode 文字 e.innerhtml document.createcomment 注釋內容 document.createdocu...

jquery下拉列表

由於需要 用以前發過的摺疊選單原始碼改了一下 做成了下拉列表 感覺還不錯 留著以後使用 首頁主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單....

Bootstrap下拉列表

使用下拉列表 dropdown 外掛程式，能夠向不論什麼元件 比方導航欄 標籤頁 膠囊式導航選單 button等 加入下拉列表。假設想要單獨引用該外掛程式的功能，那麼須要引用 dropdown.js。或者能夠引入bootstrap.js或壓縮版的bootstrap.min.js。通過 data 屬性...