JS實現乙個動態下拉列表欄

2021-05-28 13:12:56 字數 717 閱讀 4147

1 引言   

一段時間裡,經常在網上的技術論壇中看到有朋友提問怎樣用js來實現乙個動態的下拉彈出式的選單欄,我個人覺的這種功能的實現,現在已經不是難題了,在網上搜一下,各種各樣實現的方式都有,成型的**皆是,那為什麼還有這麼多人再網上苦苦搜詢實現的方法呢?我在讀完了網上若干個實現這類功能貼子之後,終於知道原委,這些貼子只道出了**,而沒有道清實現的原理,堆砌的**把那些初學者或是由於工作原因不得不出趕任務的人搞的一頭霧水。我這裡從原理的角度和簡短的**來說說這個功能的實現方式,希望給那些迷惘的人一些啟發。

2 實現原理

主要的原理是利用浮動層的可顯示與隱藏,具備相對位置的屬性的特性。

3 實現關鍵思路

1)確定選單欄的選單數,定義兩個二維陣列,乙個用來存貯主選單物件,另乙個用來儲存子選單物件。

2)建立選單標題欄(menubar),再為每個選單建立(menu),menubar和menu可用div選單內部用table進行布局。

3)menubar層要增加onmouseover、onmouseout事件,滑鼠移到menubar上時,判斷當前哪個標籤,彈出該標籤對應的選單,並隱藏其它標籤的子選單。

4)  menubar和menu可以編輯成js物件進行呼叫。

4 模擬選單的樣式解釋

選單彈出——div的visibility = visiable;

選單彈出——div的visibility = hidden;

以上描述如有出入,請諒解!

jquery實現動態改變下拉列表

例 張三李四 獲取當前選中的option值 sltlist val 獲取當前選中項的文字 sltlist option selected text 獲取當前選中的option,text為文字,val則是option的值了 或 var item select name list option sele...

JS實現多級下拉列表框

disabled div hm select div input hm select div input focus hm select div content div content div ul content div ul li content div ul li hover choose l...

js 乙個表單動態互動

1 2346 4748 4950 ie瀏覽器發展大事記 5152 53版本 54發布時間 55繫結系統 5657 58internet explorer 1 591995年8月 60windows 95 plus pack 6162 63internet explorer 2 641995年11月 ...