摘要:模拟弹框功能点点击显示下拉框,再次点击下拉框下拉框消失点击下拉框将值赋值给点击下拉框之外区域,下拉框消失模拟弹框模拟下拉请选择请选择男女
模拟select弹框
功能点:
点击text显示下拉框,再次点击下拉框下拉框消失
点击下拉框将值赋值给text
点击下拉框之外区域,下拉框消失
html
模拟select弹框 --请选择--
- --请选择--
- 男
- 女
css:
/* * @Author: baby * @Date: 2017-07-06 12:37:56 * @Last Modified by: baby * @Last Modified time: 2017-07-06 14:38:51 */ .model-select-box { position: relative; width: 200px; height: 30px; line-height: 30px; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 3px; text-indent: 5px; } .model-select-box .model-select-text { position: relative; width: 100%; height: 28px; // height: 30px; // line-height: 30px; color: #666; text-indent: 10px; font-size: 14px; cursor: pointer; user-select: none; } .model-select-box .model-select-text:after { position: absolute; top: 10px; right: 10px; content: ""; width: 0; height: 0; border-width: 10px 8px 0; border-style: solid; border-color: #666 transparent transparent; } .model-select-box .model-select-option { position: absolute; top: 30px; left: -1px; display: none; list-style: none; border: 1px solid #e4e4e4; border-top: none; padding: 0; margin: 0; width: 100%; z-index: 99; background-color: #fff; } .model-select-box .model-select-option li { height: 28px; line-height: 28px; color: #333; font-size: 14px; margin: 0; padding: 0; // text-indent: 10px; cursor: pointer; } .model-select-box .model-select-option li:hover { background-color: #f3f3f3; } .model-select-box .model-select-option li.seleced { background-color: #f3f3f3; }
js:
/* * @Author: baby * @Date: 2017-07-06 12:38:11 * @Last Modified by: baby * @Last Modified time: 2017-07-06 14:24:53 * 模拟select弹框 * 功能点: * 1. 点击text显示下拉框,再次点击下拉框下拉框消失 * 2. 点击下拉框将值赋值给text * 3. 点击下拉框之外区域,下拉框消失 * */ "use strict"; $(function() { selectModel(); }); /** * 模拟网页中所有下拉列表select * @return {[type]} [description] */ function selectModel() { var $box = $("div.model-select-box"); var $option = $("ul.model-select-option", $box); var $txt = $("div.model-select-text", $box); var speed = 10; /** * 单击某个下拉列表时,显示当前下拉列表的下拉列表框 * 并隐藏页面中其他下拉列表 */ $txt.on("click", function() { var $self = $(this); $option.not($self).siblings("ul.model-select-option").slideUp(speed, function() { init($self); }); $self.siblings("ul.model-select-option").slideToggle(speed, function() { init($self); }); return false; }); // 点击选择,关闭其他下拉 /** * 为每个下拉列表框中的选项设置默认选中标识 data-selected * 点击下拉列表框中的选项时,将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性,并改变默认选中标识 data-selected * 为选项添加 mouseover 事件 */ $option.find("li").each(function(index, element) { var $self = $(this); if ($self.hasClass("selected")) { $self.addClass("data-selected"); } }).mousedown(function() { $(this).parent().siblings("div.model-select-text").text($(this).text()).attr("data-value", $(this).attr("data-option")); $option.slideUp(speed, function() { init($(this)); }); $(this).addClass("selected data-selected").siblings("li").removeClass("selected data-selected"); return false; }).mouseover(function() { $(this).addClass("selected").siblings("li").removeClass("selected"); }); // 点击文档隐藏所有下拉 $(document).on("click", function() { var $self = $(this); $option.slideUp(speed, function() { init($self); }) }); /** * 初始化默认选择 */ function init(obj) { obj.find("li.data-selected").addClass("selected").siblings("li").removeClass("selected"); } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112222.html
摘要:模拟弹框功能点点击显示下拉框,再次点击下拉框下拉框消失点击下拉框将值赋值给点击下拉框之外区域,下拉框消失模拟弹框模拟下拉请选择请选择男女 模拟select弹框 功能点: 点击text显示下拉框,再次点击下拉框下拉框消失 点击下拉框将值赋值给text 点击下拉框之外区域,下拉框消失 html 模拟select弹框 ...
摘要:模拟弹框功能点点击显示下拉框,再次点击下拉框下拉框消失点击下拉框将值赋值给点击下拉框之外区域,下拉框消失模拟弹框模拟下拉请选择请选择男女 模拟select弹框 功能点: 点击text显示下拉框,再次点击下拉框下拉框消失 点击下拉框将值赋值给text 点击下拉框之外区域,下拉框消失 html 模拟select弹框 ...
摘要:这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。。 初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。。 初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。。 初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
阅读 1352·2021-11-22 09:34
阅读 1361·2021-09-22 14:57
阅读 3375·2021-09-10 10:50
阅读 1316·2019-08-30 15:54
阅读 3666·2019-08-29 17:02
阅读 3452·2019-08-29 12:54
阅读 2587·2019-08-27 10:57
阅读 3303·2019-08-26 12:24