首页 > 代码库 > 模拟select
模拟select
模拟select下拉框
当元素失去焦点时发生 blur 事件。这里在span上绑定trigger.blur模拟blur事件。
body加了一个click事件，点击非当前span区域触发span的trigger.blur事件来隐藏下拉ul层;
点击span区域 e.target和span[0] 返回[object HTMLSpanElement] return;保证鼠标点在span区域ul下拉层还在显示。
<style> #bindBlur{ position: relative; height: 30px; width: 200px; margin: 20px 0;} #bindBlur span{display: inline-block; width: 200px; border: 1px solid #e5e5e5; height: 30px; line-height: 30px; background: #f7f7f7; } #bindBlur ul{display:none; position: absolute; top: 30px; left: 0; border: 1px solid #e5e5e5; width:100%; line-height:30px; }</style><div id="bindBlur"> <span>显示内容</span> <ul> <li>111111111111</li> <li>222222222222</li> </ul></div><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script> $(function() { var bindBlur = $("#bindBlur"), span = bindBlur.find("span"), ul = bindBlur.find("ul"), list = ul.children("li"); span.bind("trigger.blur", function() { ul.hide(); }) span.click(function() { ul.show(); }) list.each(function() { var self = $(this); self.click(function() { var text = self.html(); span.html(text); }) }) $("body").click(function(e) { if(e.target == span[0]) { return; } span.trigger("trigger.blur"); }) })</script>
模拟select
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。