模拟select下拉菜单代码实例
分类:实例代码
分享一段代码实例,它模拟实现了select下拉菜单效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; color: #666; } ul, ol, li { list-style: none; } .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .bs { box-sizing: border-box; } .input_wrap { width: 640px; padding: 20px; background: #f0f0f0; margin: 0 auto; } .input_wrap input { width: 100%; height: 50px; line-height: 50px; padding-left: 20px; border: none; box-shadow: 1px 1px 10px #ccc; } .dialog { width: 100%; background: #fff; margin-top: 5px; display: none; } .dialog li { color: #666; padding-left: 10px; box-sizing: border-box; height: 50px; line-height: 50px; border-bottom: 1px solid #f0f0f0; } </style> </head> <body> <div class="input_wrap bs"> <input type="text" readonly="readonly" placeholder="请选择" id="input_text" class="bs" /> <div class="dialog" id="dialog"> <ul class="bs"> <li>前端教程网一</li> <li>前端教程网二</li> <li>前端教程网三</li> <li>蚂蚁Biu罗四</li> </ul> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> function Dialog(id) { this.id = id, this.Dialog_chlick(); this.kong(); } Dialog.prototype.Dialog_chlick = function() { var self = this; self.Dialog_input = document.getElementById(this.id); //console.log(Dialog_input); var Dialog_box = document.getElementById("dialog"); //var flag = $(self.Dialog_input).attr("data-value"); $(self.Dialog_input).click(function(e) { e.stopPropagation(); if ($(Dialog_box).is(":hidden")) { $(Dialog_box).show(); } else { $(Dialog_box).hide(); } }); $(".dialog li").click(function() { var this_value = $(this).text(); $(Dialog_box).hide(); self.Dialog_input.value = this_value; }); }; Dialog.prototype.kong = function() { var target = document.getElementById("dialog"); document.onclick = function() { target.style.display = "none"; }; target.onclick = function() { if (document.all) { window.event.cancelBubble = true; } else { event.stopPropagation(); } }; } var obj = new Dialog("input_text"); </script> </body> </html>
模拟select下拉菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于模拟select下拉菜单代码实例就介绍到这了。
模拟select下拉菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看。