各位小伙伴
今天咱們來做一個下拉列表
JS實(shí)現(xiàn)下拉列表
首先來給列表添加內(nèi)容
這邊設(shè)置了三個選項欄，里面的內(nèi)容我都隱藏起來了~想看我隱藏的是什么內(nèi)容嗎焰望？接著往下看吧~
給頁面設(shè)置樣式，中間的調(diào)試步驟就省略了嘉竟。感興趣的小伙伴彤守，可以自己來調(diào)試一下历极，感受一下~
頁面效果：
靜態(tài)頁面的效果咱們就做完了毁菱，現(xiàn)在利用 JavaScript 來給它添加動態(tài)的效果膛腐。
這段 JS 的代碼的作用是：
創(chuàng)建一個數(shù)組 aA 獲取類名為 .main 的 div標(biāo)簽下的 ul 標(biāo)簽下的 li 標(biāo)簽下的所有的 a 標(biāo)簽。創(chuàng)建一個 aLi 數(shù)組鼎俘，獲取類名為?.main 的 div 標(biāo)簽下的 ul 標(biāo)簽下的所有 li 標(biāo)簽（其中 .main 是 div 標(biāo)簽的類名，div ?ul li 都是 HTML 中的常用標(biāo)簽這邊不做解釋哈~）
外層的 for 循環(huán)辩涝，給所有的 a 標(biāo)簽添加一個點(diǎn)擊事件贸伐，當(dāng)我們點(diǎn)擊頁面上的 a 標(biāo)簽（美女、男神怔揩、愛好）的選項時捉邢，彈出該列表選項下的內(nèi)容，并且改變所選列表選項的背景色~
內(nèi)層的 for 循環(huán)商膊，當(dāng)我們點(diǎn)擊其他選項時伏伐，收起之前展開的列表~
效果：
再添加一個效果，當(dāng)我的鼠標(biāo)移入的時候晕拆，所處的選項變換背景顏色藐翎。
獲取類名為 .main 的 div標(biāo)簽下的 ul 標(biāo)簽下的 li 標(biāo)簽下的所有的 dt 標(biāo)簽。然后利用 for 循環(huán)实幕，當(dāng)鼠標(biāo)移入的時候吝镣，把所有的 dt 標(biāo)簽的背景色設(shè)置成#ccc，只把鼠標(biāo)移入的這一個 dt 標(biāo)簽的背景色換成 #ff4500昆庇。
現(xiàn)在看起來是不是好看多了末贾，現(xiàn)在我們的下拉菜單，只能實(shí)現(xiàn)點(diǎn)擊展開的功能整吆，并不能點(diǎn)擊合并拱撵。
我們在代碼中設(shè)置一個標(biāo)記開關(guān) onOff 辉川，當(dāng) onOff = true 時，表示這個選項列表的狀態(tài)是關(guān)閉的拴测，當(dāng) onOff = false 時乓旗，表示這個選項列表的狀態(tài)是打開的。
我們的代碼邏輯是:
當(dāng)我們點(diǎn)擊這個列表選項的時候昼扛，如果?(if) 它的狀態(tài)是?onOff = true寸齐，就給它設(shè)置關(guān)閉狀態(tài)下的樣式，并且使用 for 循環(huán)使所有的選項都是?onOff = true?狀態(tài)抄谐，把當(dāng)前的選項渺鹦，設(shè)置成打開的樣式，更新開關(guān)使?onOff = false蛹含，否則?(else)?給它設(shè)置成關(guān)閉狀態(tài)的樣式毅厚，并且讓?onOff = true。
效果：
今天的分享就到這了
伙伴們再見了
