利用 JavaScript 制作一個下拉列表

各位小伙伴

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

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。

效果:

今天的分享就到這了

伙伴們再見了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,791評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,868評論 18 139
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,599評論 32 459
  • HTML5< !--...--> 標簽 comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。...
    野小寶閱讀 1,346評論 0 10
  • 窗外微雨窗內(nèi)笑, 美酒佳肴遇至交, 莫怕暢飲不識路, 清風自會送君歸!
    逆順同視閱讀 429評論 0 4