演 示 下 载
简介
今天我们用 CSS 和 jQuery 来制作一个简单的下拉框。
浏览器兼容
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| IE8+ | Edge | Chrome | Firefox | Opera | Safari |
制作方法
1、HTML
<div class="select dowebok"> ?? ?<span class="placeholder">请选择</span> ?? ?<ul> ?? ??? ?<li>百度</li> ?? ??? ?<li>谷歌</li> ?? ??? ?<li>雅虎</li> ?? ??? ?<li>新浪</li> ?? ?</ul> </div>
2、CSS
@import "http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css"; html { ??? box-sizing: inherit; ??? background-color: #8e9eab; ??? background: linear-gradient(to left, #8e9eab, #eef2f3); } body { ??? margin: 10% auto; ??? font-size: 12px; } .select { ??? position: relative; ??? display: block; ??? margin: 0 auto; ??? width: 100%; ??? max-width: 325px; ??? color: #cccccc; ??? vertical-align: middle; ??? text-align: left; ??? user-select: none; ??? -webkit-touch-callout: none; } .select .placeholder { ??? position: relative; ??? display: block; ??? background-color: #393d41; ??? z-index: 1; ??? padding: 1em; ??? border-radius: 2px; ??? cursor: pointer; } .select .placeholder:hover { ??? background: #34383c; } .select .placeholder:after { ??? position: absolute; ??? right: 1em; ??? top: 50%; ??? transform: translateY(-50%); ??? font-family: 'FontAwesome'; ??? content: '/f078'; ??? z-index: 10; } .select.is-open .placeholder:after { ??? content: '/f077'; } .select.is-open ul { ??? display: block; } .select.select--white .placeholder { ??? background: #fff; ??? color: #999; } .select.select--white .placeholder:hover { ??? background: #fafafa; } .select ul { ??? display: none; ??? position: absolute; ??? overflow: hidden; ??? width: 100%; ??? background: #fff; ??? border-radius: 2px; ??? top: 100%; ??? left: 0; ??? list-style: none; ??? margin: 5px 0 0 0; ??? padding: 0; ??? z-index: 100; } .select ul li { ??? display: block; ??? text-align: left; ??? padding: 0.8em 1em 0.8em 1em; ??? color: #999; ??? cursor: pointer; } .select ul li:hover { ??? background: #4ebbf0; ??? color: #fff; }
3、JavaScript
$('.select').on('click', '.placeholder', function(e) { ?? ?var parent = $(this).closest('.select'); ?? ?if (!parent.hasClass('is-open')) { ?? ??? ?parent.addClass('is-open'); ?? ??? ?$('.select.is-open').not(parent).removeClass('is-open'); ?? ?} else { ?? ??? ?parent.removeClass('is-open'); ?? ?} ?? ?e.stopPropagation(); }).on('click', 'ul>li', function() { ?? ?var parent = $(this).closest('.select'); ?? ?parent.removeClass('is-open').find('.placeholder').text($(this).text()); }); $('body').on('click', function() { ?? ?$('.select.is-open').removeClass('is-open'); });
演 示 下 载
转载请注明：三只源码 » 用CSS和jQuery制作简单的下拉框
