模拟select弹框
功能点:
点击text显示下拉框,再次点击下拉框下拉框消失
点击下拉框将值赋值给text
点击下拉框之外区域,下拉框消失
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>模拟select弹框</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--模拟下拉-->
<div class="model-select-box" style="width:180px; z-index:22;">
<div id="boxsex" class="model-select-text" data-value="">--请选择--</div>
<ul class="model-select-option">
<li data-option="">--请选择--</li>
<li data-option="1">男</li>
<li data-option="0">女</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
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');
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。