各位小伙伴

今天咱們來做一個下拉列表

JS實現(xiàn)下拉列表

首先來給列表添加內(nèi)容

這邊設置了三個選項欄，里面的內(nèi)容我都隱藏起來了~想看我隱藏的是什么內(nèi)容嗎？接著往下看吧~

給頁面設置樣式，中間的調(diào)試步驟就省略了。感興趣的小伙伴，可以自己來調(diào)試一下，感受一下~

頁面效果：

靜態(tài)頁面的效果咱們就做完了，現(xiàn)在利用 JavaScript 來給它添加動態(tài)的效果。

這段 JS 的代碼的作用是：

創(chuàng)建一個數(shù)組 aA 獲取類名為 .main 的 div標簽下的 ul 標簽下的 li 標簽下的所有的 a 標簽。創(chuàng)建一個 aLi 數(shù)組，獲取類名為?.main 的 div 標簽下的 ul 標簽下的所有 li 標簽（其中 .main 是 div 標簽的類名，div ?ul li 都是 HTML 中的常用標簽這邊不做解釋哈~）

外層的 for 循環(huán)，給所有的 a 標簽添加一個點擊事件，當我們點擊頁面上的 a 標簽（美女、男神、愛好）的選項時，彈出該列表選項下的內(nèi)容，并且改變所選列表選項的背景色~

內(nèi)層的 for 循環(huán)，當我們點擊其他選項時，收起之前展開的列表~

效果：

再添加一個效果，當我的鼠標移入的時候，所處的選項變換背景顏色。

獲取類名為 .main 的 div標簽下的 ul 標簽下的 li 標簽下的所有的 dt 標簽。然后利用 for 循環(huán)，當鼠標移入的時候，把所有的 dt 標簽的背景色設置成#ccc，只把鼠標移入的這一個 dt 標簽的背景色換成 #ff4500。

現(xiàn)在看起來是不是好看多了，現(xiàn)在我們的下拉菜單，只能實現(xiàn)點擊展開的功能，并不能點擊合并。

我們在代碼中設置一個標記開關(guān) onOff ，當 onOff = true 時，表示這個選項列表的狀態(tài)是關(guān)閉的，當 onOff = false 時，表示這個選項列表的狀態(tài)是打開的。

我們的代碼邏輯是:

當我們點擊這個列表選項的時候，如果?(if) 它的狀態(tài)是?onOff = true，就給它設置關(guān)閉狀態(tài)下的樣式，并且使用 for 循環(huán)使所有的選項都是?onOff = true?狀態(tài)，把當前的選項，設置成打開的樣式，更新開關(guān)使?onOff = false，否則?(else)?給它設置成關(guān)閉狀態(tài)的樣式，并且讓?onOff = true。

效果：

今天的分享就到這了

伙伴們再見了