具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google . 另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈. 演示及代码: 演示代码 代码下载运行代码: </p><p><b><br /><b> </p><p><title>用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</title> </p><p>/*reset css*/<br />body{font-size:0.8em;letter-spacing:1px;font-family:5fae8f6f96c59ed1;line-height:1.8em}<br />div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0}<br />input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle}<br />h1{font-size:1em;font-weight:normal}<br />h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none}<br />h1 a:hover{background:#a40000;color:#fff;text-decoration:underline}<br />h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative}<br />/*demo css*/<br />#demo{position:relative;width:500px;height:260px;border:1px solid #ccc}<br />#demo dl.tips{margin:2px;padding:8px;background:#f2f2f2;line-height:24px}<br />#demo dl.tips dt{font-size:14px;font-weight:bolder}<br />#demo dl.tips dd{text-indent:24px}<br />#demo .demo_b{top:180px;margin-left:-90px;z-index:888}<br />#demo .demo_c{top:220px;margin-left:-60px;z-index:777} </p><p>.selectitem{position:absolute;top:140px;left:50%;margin-left:-120px;overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer;z-index:999}<br />.selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat}<br />.selectitem dt.drop{background-position:0 -30px;}<br />.selectitem dt.shrink{background-position:0 0}<br />.selectitem dd.hover{background-color:#b6e2e2} </p><p>.selectitem dl .tag_news{background-position:0 -60px;color:#bd0000}<br />.selectitem dl .tag_it{background-position:0 -90px;color:#0759E0}<br />.selectitem dl .tag_reading{background-position:0 -120px;color:#409513}<br />.selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E}<br />.selectitem dl .tag_career{background-position:0 -180px;color:#000382}<br />.selectitem dl .tag_living{background-position:0 -210px;color:#733900}<br />.selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B} </p><p></b> </p><p><b>Mr.Think的个人博客<br />@专注前端技术,热爱PHP,崇尚简单生活.</b><br /><b>返回文章页:用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</b> </p><p>用dl模拟实现可自定义样式的SELECT下拉列表<br />1. 充分考虑用户体验, 快速划过不会触发;<br />2. 可根据需求自定义各种样式;<br />3. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表. </p><p>请选择标签类别<br />时事 新闻<br />技术互联网 新玩意儿<br />读书 音乐 影视 <div class="pagination"><a title="Page"> <b>1</b>/<b>2</b> </a> <b>1</b> <a href="/cos/2020/0522/511254_2.shtml">2</a> <a href="/cos/2020/0522/511254_2.shtml">下一页</a> <a href="/cos/2020/0522/511254_2.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0522/511254.shtml", "title": "基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装-易采站长站", "description": "具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google . 另外, 有兴趣的朋友,可以尝试在本插件基础上改一个", "pubDate": "2020-05-22 T 15:38:59+08:00", "upDate": "2020-05-22 T 15:38:59+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0522/511254.shtml", "wapUrl":"https://www.easck.com/cos/2020/0522/511254.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
