作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
【静态布局】
1）组件整体设计 <br/>
组件框架、左边为输入文本框、右边为箭头图标、隐藏区域的下拉列表值 <br/>
2）先设置一个组件框架div，设置宽度为230px，高度为30px <br/>
3）框架内，左边设置一个div，左浮动，宽度为200px，高度和行高为30px <br/>
浮动的div内设置一个input标签，用于输入信息 <br/>
4）框架内，右边设置一个div，同样是左浮动，高宽度均为30px <br/>
浮动的div内设置一个span标签，用于设置图标 <br/>
5）设置箭头向下图标 <br/>border: 8px solid transparent;border-top-color:#ccc;
6）设置箭头向上图标 <br/>
在箭头向下的基础上，设置旋转180度样式可得到箭头向上箭头transform:rotate(180deg);
- 效果
- 代码
<style type="text/css">
.arrow-down {
display: inline-block;
background-color: transparent;
width: 0px;
font-weight: bold;
border: 8px solid transparent;
border-top-color: #ccc;
margin: 10px 0 0 6px;
}
</style>
<div class="" style="width:230px;height:30px;border:1px solid #ccc;">
<div style="width:200px;height:30px;line-height:30px;float:left;">
<input placeholder="请选择" style="float:none;margin-left:0px;width:90%;padding-left:5%;" />
</div>
<div style="width:30px;height:30px;float:left;">
<span class="arrow-down"></span>
</div>
</div>【隐藏区域的下拉框】
1）框架内，设置一个下拉框的父级div，宽度设置为230px，高度为200px，超出高度则显示滚动条 <br/>
2）设置选项区域，div标签包含span标签
div标签设置高度和行高为35px，并设置手指样式，以及hover高亮样式，span标签则显示对应的文本值 <br/>
- 效果
【箭头图标分析】
1）设置一个目标样式的宽度为0，并转为块和行内元素display:inline-block <br/>
2）设置边框为8px，可以根据自己情况设定，默认透明 <br/>border: 8px solid transparent; <br/>
3）可以分别设置边框四个方向的颜色 <br/>border-top-color、border-right-color、border-bottom-color、border-left-color
<div style="width:0;display:inline-block;border:80px solid transparent;border-top-color:#099dff;border-right-color:#f38237;border-bottom-color:#db85ea;border-left-color:#5cd5e9;">
</div>【交互设置】
1）绑定文本框和箭头点击事件 <br/>
点击文本框，箭头由向下变为向上，同时显示下拉文本框，可以设置flag标志来回切换 <br/>
这里有个小技巧，当点击其他地方时，也就是document，也要隐藏下拉，但是点击箭头和文本框都会触发document点击事件，所以，可以在文本框点击事件里加一个事件冒泡 <br/>
2）下拉框选项模板 <br/>
<script type="text/template" id="selectTemplate">
<div class="select-item">
<span></span>
</div>
</script>3）页面加载时，循环下拉选项值 <br/>
获取模板html，然后清空前后空格转为dom对象，给虚拟dom对象赋值，最后通过获取完整html追加到目标下拉div里
- 效果
- 代码
var selectArr = ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'];
function createSelect() {
var template = $("#selectTemplate").html().trim();
var html = '';
for (var i = 0; i < selectArr.length; i++) {
var dom = $(template);
$("span", dom).html(selectArr[i]);
html += dom.prop('outerHTML');
}
$(".select-list-div").html(html);
}
createSelect();4）设置下拉选项的点击事件 <br/>
同时也设置防止冒泡，子元素和父元素同时设置点击事件时，先会从内到外逐个触发事件，可以给子级设置防止冒泡来阻断父级事件得触发
5）
【主要知识点列表】
| 编号 | 语言或插件 | 知识点 | 说明 | ||
|---|---|---|---|---|---|
| 1 | css | transition | 过渡、渐变属性，transition:all .5s | ||
| 2 | css | transform | 转变属性，一般结合旋转、放缩、坐标轴等，transform:rorate(180deg)，旋转180度 | ||
| 3 | js | event | 事件对象，var event = event | window.event; | |
| 4 | js | stopPropagation | 阻止事件冒泡，var event = event | window.event; |
【完整代码】
<style type="text/css">
.select-div {
width: 230px;
height: 30px;
border: 1px solid #ccc;
position: relative;
border-radius: 5px;
}
.arrow-span {
transition: all .5s;
-moz-transition: all .5s; /* Firefox 4 */
-webkit-transition: all .5s; /* Safari 和 Chrome */
-o-transition: all .5s; /* Opera */
}
.arrow-down {
display: inline-block;
width: 0px;
border: 8px solid transparent;
border-top-color: #ccc;
margin: 10px 0 0 6px;
}
.arrow-up {
display: inline-block;
width: 0px;
border: 8px solid transparent;
border-top-color: #ccc;
transform: rotate(180deg);
margin: 2px 0 0 6px;
}
.select-list-div {
width: 230px;
height: 200px;
position: absolute;
top: 35px;
left: 0px;
border-radius: 5px;
box-shadow: 0 0 13px #ccc;
background: #fff;
overflow:auto;
}
.select-item {
width: 100%;
height: 40px;
line-height: 40px;
}
.select-item span {
margin-left: 30px;
}
.select-item:hover, .select-item-action {
background: #f3f3f3;
}
</style>
<div class="select-div">
<div style="width:200px;height:30px;line-height:30px;float:left;">
<input id="btnMajor" placeholder="请选择" style="float:none;margin-left:0px;width:90%;padding-left:5%;" />
</div>
<div class="arrow-div" style="width:30px;height:30px;float:left;">
<span class="arrow-span arrow-down"></span>
</div>
<!--下拉框列表-->
<div class="select-list-div" style="display:none;"></div>
</div>
<!--下拉选项模板-->
<script type="text/template" id="selectTemplate">
<div class="select-item">
<span></span>
</div>
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 文本框点击事件
$("#btnMajor,.arrow-div").click(function (event) {
var flag = $(".select-div").attr('data-flag');
if (flag == '1') {
$(".select-list-div").hide();
$(".arrow-span").removeClass('arrow-up');
$(".select-div").attr('data-flag', '0');
}
else {
$(".select-list-div").show();
$(".arrow-span").addClass('arrow-up');
$(".select-div").attr('data-flag', '1');
}
event.stopPropagation();
});
$(document).click(function () {
$("#btnMajor").trigger('click');
});
// 循环遍历下拉选项值
var selectArr = ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'];
function createSelect() {
var template = $("#selectTemplate").html().trim();
var html = '';
for (var i = 0; i < selectArr.length; i++) {
var dom = $(template);
$("span", dom).html(selectArr[i]);
html += dom.prop('outerHTML');
}
$(".select-list-div").html(html);
}
createSelect();
// 选项点击事件
$(".select-item").click(function (event) {
event.stopPropagation();
});
});
</script>