demo.gif
想要制作這么一個效果還是比較麻煩的鳍怨，但是代碼并不難理解串结。首先哑子，來看看 Html 代碼。
<div class="container">
<div class="heading">
<h2>Custom Select</h2>
</div>
<div class="select">
<p>Please select</p>
<ul>
<li data-value="HTML5">HTML5</li>
<li data-value="CSS3">CSS3</li>
<li data-value="JavaScript">JavaScript</li>
<li data-value="JQuery">JQuery</li>
<li data-value="Backbone">Backbone</li>
</ul>
</div>
</div>
可見肌割，我們并沒有利用原生的 select 元素卧蜓，而是利用其它元素來模擬這個效果。我們?yōu)?li 元素指定了 data-value,主要是接下來我們會用 JQuery 獲取選中值并將其放置到 p 元素下把敞。
下面逐步來看 CSS 代碼烦却。
* {
margin: 0;
padding: 0;
}
html {
font-family: 'Terminal';
font-size: 62.5%;
}
body {
background-color: #33CC66;
}
- 將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設置為
0。 - 將網(wǎng)頁中的默認字體設置為
Terminal先巴，字體大小設置為62.5%, 也就是10px其爵。 - 設置背景顏色為
#33CC66。
<link rel='stylesheet' type='text/css'>
上面我們用到了 Terminal 字體伸蚯，而且接下來我們還會使用 Lobster 字體摩渺，所以用這行代碼添加引用。
.heading, .select {
display: block;
width: 22rem;
margin: 0 auto;
text-align: center;
}
.heading {
width: 28rem;
margin-top: 10rem;
margin-bottom: 2rem;
}
.heading h2 {
font-size: 6rem;
font-family: 'Lobster';
color: #ffffff;
}
- 指定
headng, select寬度并指定其水平居中剂邮。 - 修改
heading的寬度摇幻，主要是為了讓其寬度大于select的寬度，顯得更加美觀挥萌。然后指定其上外邊距和下外邊距绰姻。 - 設置
heading下h2元素的字體和字體大小，顏色引瀑。
.select > p, .select ul {
background-color: #ffffff;
font-size: 2rem;
border: 1px solid bisque;
border-radius: 5px;
margin-bottom: 0;
}
.select > p {
text-align: left;
padding: 1rem;
position: relative;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
color: rgba(102, 102, 102, .6);
}
.select > p:after {
display: block;
width: 10px;
height: 10px;
content: '';
position: absolute;
top: 1.4rem;
right: 2rem;
border-bottom: 1px solid #33CC66;
border-left: 1px solid #33CC66;
transform: rotate(-45deg);
transition: transform .3s ease-out, top .2s ease-out;
}
- 設置
p和ul元素的背景顏色和邊框等設置狂芋。 - 為
p元素單獨指定樣式，并設置其position屬性憨栽，主要是為了下面繪制右側的下拉按鈕帜矾。 - 利用
:after在p元素的右方繪制下拉按鈕翼虫，可以看出來，我們是利用左下邊框然后旋轉-45度 模擬的這個效果屡萤。值得注意的是珍剑，我們需要將其display設置為block，并且設置寬高死陆，否則看不到 這個效果招拙。
.select ul {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
list-style-type: none;
cursor: pointer;
overflow-y: auto;
max-height: 0;
transition: max-height .3s ease-out;
}
.select ul li {
padding-left: 0.5rem;
display: block;
line-height: 3rem;
text-align: left;
}
- 設置
ul的一些默認屬性，并將其設置最大寬度為0措译，指定overflow-y為auto别凤，這個時候ul將會被隱藏。 - 在這里設置的時候我遇到了一個問題瞳遍，就是
li標簽始終占不滿ul的一行闻妓，那是因為其默認有margin和padding菌羽，所以在一開始的時候就將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設置成了0掠械。
.select.open ul {
max-height: 20rem;
transform-origin: 50% 0;
-webkit-animation: slide-down .5s ease-in;
}
.select.open > p:after {
position: absolute;
top: 1.6rem;
transform: rotate(-225deg);
transition: transform .3s ease-in, top .2s ease-in;
}
- 為
open設置最大高度，并為其指定動畫效果注祖。 - 將下拉按鈕旋轉
-225度猾蒂，并為其指定動畫。
下面我們看看為 ul 元素指定的 slide-down 動畫效果是晨，這也是這個下拉特效的關鍵所在肚菠。
@-webkit-keyframes slide-down {
0% {
transform: scale(1, 0);
}
25% {
transform: scale(1, 1.25);
}
50% {
transform: scale(1, 0.75);
}
75% {
transform: scale(1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
看到以上代碼可能就都明白了，就是不斷改變 ul 的大小罩缴，讓其在 0.75-1.25 之間進行縮放蚊逢，所以就會有那個跳動的效果了。
下面還有一些簡單的 CSS 代碼箫章，不再解釋烙荷。
.select ul li:hover {
background-color: rgba(102, 153, 102, 0.4);
}
.select .selected {
background-color: rgba(102, 153, 102, 0.8);
}
CSS 講完了，下面就可以看看我們是如何利用 JQuery 控制這個效果的檬寂。
我們并不需要下載 JQuery 就可以使用终抽，因為現(xiàn)在已經(jīng)有很多網(wǎng)站提供了 CDN 服務，比如我使用的 BootCDN桶至。
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
下面就可以使用 JQuery 了昼伴。
<script>
$(document).ready(function () {
$('.select ul li').on("click", function (e) {
var _this = $(this);
$('.select >p').text(_this.attr('data-value'));
$(_this).addClass('selected').siblings().removeClass('selected');
$('.select').toggleClass('open');
cancelBubble(e);
});
$('.select>p').on("click", function (e) {
$('.select').toggleClass('open');
cancelBubble(e);
});
$(document).on('click', function () {
$('.select').removeClass('open');
})
})
function cancelBubble(event) {
if (event.stopPropagation) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble();
}
}
</script>
- 首先為
p標簽綁定click事件膝捞，在觸發(fā)的時候美浦，為select添加或移除open class, 也就是將ul顯示出來。 - 為
li綁定click事件且改，當選中了一個li元素的時候女蜈，首先獲取到data-value描沟，然后將其賦值給p標簽飒泻，然后為選中的li添加selected class,與此同時利用siblings()方法，讓兄弟節(jié)點的selected class移除吏廉。 - 為
document設置click事件泞遗，當我們點擊網(wǎng)頁中任何一處地方的時候，如果ul是打開的席覆，就將其關閉史辙，不過這個時候由于所有元素都在document內(nèi)，所以我們需要阻止事件冒泡佩伤，調(diào)用自己寫的cancelBubble()方法聊倔。
好了，就講到這里生巡，有不理解的可在下方留言耙蔑。
