各位小伙伴
今天咱們來做一個下拉列表
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。
效果:
今天的分享就到這了
伙伴們再見了