首先來看看要實現的效果圖
想要製作這麼乙個效果還是比較麻煩的，但是**並不難理解。
首先，來看看 html **。
xml/html code複製內容到剪貼簿
可見，我們並沒有利用pholbwwz原生的 select 元素，而是利用其它元素來模擬這個效果。我們為 li 元素指定了 data-value,主要是接下來我們會用 jquery 獲取選中值並將其放置到 p 元素下。
下面逐步來看 css **。
css code複製內容到剪貼簿
1、將網頁中所有元素的外邊距和內邊距設定為 0。
2、將網頁中的預設字型設定為 terminal，字型大小設定為 62.5%, 也就是 10px。
3、設定背景顏色為 #33cc66。
xml/html code複製內容到剪貼簿
上面我們用到了 terminal 字型，而且接下來我們還會使用 lobster 字型，所以用這行**新增引用。
1、指定 headng, select 寬度並指定其水平居中。
2、修改 heading 的寬度，主要是為了讓其寬度大於 select 的寬度，顯得更加美觀。然後指定其上外邊距和下外邊距。
3、設定 heading 下 h2 元素的字型和字型大小，顏色。
css code複製內容到剪貼簿
1、設定 p 和 ul 元素的背景顏色和邊框等設定。
2、為 p 元素單獨指定樣式，並設定其 position 屬性，主要是為了下面繪製右側的下拉按鈕。
3、利用 :after 在p 元素的右方繪製下拉按鈕，可以看出來，我們是利用左下邊框然後旋轉 -45 度 模擬的這個效果。值得注意的是，我們需要將其 display 設定為 block，並且設定寬高，否則看不到 這個效果。
css code複製內容到剪貼簿
1、設定 ul 的一些預設屬性，並將其設定最大寬度為 0，指定 overflow-y 為 auto ，這個時候ul 將會被隱藏。
2、在這裡設定的時候我遇到了乙個問題，就是 li 標籤始終佔不滿 ul 的一行，那是因為其預設有 margin 和 padding ，所以在一開始的時候就將網頁中所有元素的外邊距和內邊距設定成了 0。
css code複製內容到剪貼簿
1、為 open 設定最大高度，並為其指定動畫效果。
2、將下拉按鈕旋轉 -225 度，並為其指定動畫。
下面我們看看為 ul 元素指定的 slide-down 動畫效果，這也是這個下拉特效的關鍵所在。
css code複製內容到剪貼簿
看到以上**可能就都明白了，就是不斷改變 ul 的大小，讓其在 0.75-1.25 之間進行縮放，所以就會有那個跳動的效果了。
下面還有一些簡單的 css **，不再解釋。
css code複製內容到剪貼簿
css 講完了，下面就可以看看我們是如何利用 jquery 控制這個效果的。
我們並不需要** jquery 就可以使用，因為現在已經有很多**提供了 cdn 服務，比如我使用的 bootcdn。
xml/html code複製內容到剪貼簿
下面就可以使用 jquery 了。
xml/html code複製內容到剪貼簿
1、首先為 p 標籤繫結 click 事件，在觸發的時候，為 select 新增或移除 open class, 也就是將 ul 顯示出來。
2、為 li 繫結 click 事件，當選中了乙個 li 元素的時候，首先獲取到 data-value，然後將其賦值給 p 標籤，然後為選中的 li 新增 selected class,與此同時利用 siblings() 方法，讓兄弟節點的 selected class 移除。
3、為 document 設定click 事件，當我們點選網頁中任何一處地方的時候，如果 ul 是開啟的，就將其關閉，不過這個時候由於所有元素都在 document 內，所以我們需要阻止事件冒泡，呼叫自己寫的 cancelbubble() 方法。
總結本文標題: 利用css實現酷炫的下拉框特效
本文位址:
CSS 實現炫酷的動態背景效果
活不多說，直接開始 效果圖 乙個萬能的div class bgc div 主要是css部分 使用background屬性 純色線性漸變 linear gradient 徑向漸變 radial gradient 角向漸變 conic gradient 多重線性漸變 repeating linear g...
JS連動下拉框的實現
以前學。net的時候 下拉框連動只要設定一下就好了，現在在用php開發，沒有這個功能，只能自己用js寫了，這個應該比較經常用到。上面的 中 subcat new array 是用php模板技術先把城市的繫結輸出到頁面，自己自動生成陣列 然後在html中新增呼叫上面的 即可 例 province 這是...
BootStrap實現帶搜尋的下拉框
前段時間在做乙個小專案的時候，因為專案需求需要選擇ip,然後就寫成簡單的select下拉框進行選擇，由於ip太多網段太亂 公司人就說能不能實現乙個帶有搜尋的下拉框，然後我通過學習發現bootstrap已經完美的實現了這個功能。我先看下倆次實現的效果 1.這個是bootstrap的簡單下拉框看著那麼多...