请记住我们的网址:3zcode.com。也就是“三只源码"

用CSS和jQuery制作简单的下拉框

源码 admin 1424℃ 0评论

用CSS和jQuery制作简单的下拉框

演 示 下 载

简介

今天我们用 CSS 和 jQuery 来制作一个简单的下拉框。

浏览器兼容

用CSS和jQuery制作简单的下拉框 用CSS和jQuery制作简单的下拉框 用CSS和jQuery制作简单的下拉框 用CSS和jQuery制作简单的下拉框 用CSS和jQuery制作简单的下拉框 用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制作简单的下拉框

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址