标签：
直接贴代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select框</title> <style> * { margin: 0; padding: 0; } body { font-family: 微软雅黑; } ul, ul li { list-style: none; } #select { width: 200px; height: 30px; line-height: 30px; position: relative; background: #fff; border: 1px solid #ccc; font-size: 12px; margin: 100px auto; } #select span { padding-left: 10px; color: #555; background: #fff; box-shadow: 1px 2px 2px rgba(0,0,0,0.1) inset; width: 190px; display: block; cursor: pointer; } #select ul.option { color: #555; border: 1px solid #ccc; width: 200px; margin-left: -1px; } #select ul.option li { text-indent: 10px; } #select ul.option li:hover { cursor: pointer; background: #f1f1f1; color: #333; } #triangle-up { display: block; position: absolute; top: calc(50% - 5px); right: 10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #ccc; } #triangle-down { display: block; position: absolute; top: calc(50% - 5px); right: 10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #ccc; } </style> <script src="jquery-1.7.2.min.js"></script> </head> <body> <div id="select"> <span class="zhiye">---请选择你的职业---</span> <i id="triangle-down"></i> </div> <script> $(function(){ $(‘.zhiye‘).click(function(ev){ var oPtionHtml = $(‘<ul class="option"><li>java开发工程师</li><li>前端开发工程师</li><li>UI设计师</li><li>ios开发工程师</li><li>安卓开发工程师</li></ul>‘); if($(‘.option‘).length>0){ $(‘.option‘).remove(); }else{ $(‘#triangle-down‘).attr(‘id‘,‘triangle-up‘); $(this).closest(‘#select‘).append(oPtionHtml); } ev.stopPropagation(); }) $(‘ul.option li‘).live(‘click‘,function(){ var IndexText = $(this).text(); $(this).parent(‘ul‘).siblings(‘span‘).text(IndexText); $(‘#triangle-up‘).attr(‘id‘,‘triangle-down‘); $(this).closest(‘ul‘).remove(); }); function closeMenu(ele){ $(ele).find(‘ul.option‘).remove(); } $(document).click(function(){ closeMenu(‘#select‘); $(‘#triangle-up‘).attr(‘id‘,‘triangle-down‘); }) }) </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wulianghai/p/4287836.html
