js+csss实现的一个带复选框的下拉框

来源：互联网发布：ubuntu安装在哪个区编辑：程序博客网时间：2024/05/29 14:37

用js+csss实现的一个带复选框的下拉框，用到了很基础的技术，但是比较实用，喜欢的朋友可以参考下:

效果图：

css：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<style type="text/css">
/* 带复选框的下拉框 */
ul li{ 
list-style:none;
padding:0px;
margin:0px;
}
 
.select_checkBox{
border:0pxsolid red;
position:relative;
display:inline-block;
 
 
}
.chartQuota{
height:23px;
float:left;
display:inline-block;
border:0pxsolid black;
position:relative;
}
 
.chartOptionsFlowTrend{
z-index:300;
background-color:white;
border:1pxsolid gray;
display:none;
position:absolute;
left:0px;
top:23px;
width:150px;
}
.chartOptionsFlowTrend ul{ 
float:left;
padding:0px;
margin:5px;
}
.chartOptionsFlowTrend li{ 
/* float:left; */
display:block;
position:relative;
left:0px;
margin:0px;
clear:both;
}
.chartOptionsFlowTrend li *{ 
float:left;
}
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration:underline;
cursor:auto;
}
.chartQuota p a { 
float:left;
height:21px;
outline:0none;
border:1pxsolid #ccc;
line-height:22px;
padding:05px;
overflow:hidden;
background:#eaeaea;
color:#313131;
text-decoration:none;
}
 
.chartQuota p { 
margin:0px;
folat:left;
overflow:hidden;
height:23px;
line-height:24px;
display: inline-block;
}
.chartOptionsFlowTrend p { 
height:23px;
line-height:23px;
overflow:hidden;
position:relative;
z-index:2;
background:#fefbf7;
padding-top:0px;
display: inline-block;
}
.chartOptionsFlowTrend p a { 
border:1pxsolid #fff;
margin-left:15px;
color:#2e91da;
}
</style>

html：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<divclass="select_checkBox">
<divclass="chartQuota">
<p>
<ahref="javascript:;"hidefocus="true"title="请选择指标"><span>选择指标</span>
<b></b>
</a>
</p>
 
</div><br>
<divclass="chartOptionsFlowTrend"">
<ul>
<liclass=""><inputtype="checkbox"value="1"><span>浏览次数（PV）</span>
</li>
<liclass=""><inputtype="checkbox"value="1"><span>独立访客（UV）</span>
</li>
<liclass=""><inputtype="checkbox"value="1"><span>IP</span>
</li>
<liclass=""><inputtype="checkbox"value="1"><span>新独立访客</span>
</li>
<liclass=""><inputtype="checkbox"value="1"><span>访问次数</span>
</li>
</ul>
<p>
<ahref="javascript:;"title="确定"hidefocus="true"class="a_0">确定</a><a
href="javascript:;"title="取消"hidefocus="true"class="a_1">取消</a>
</p>
</div>
</div>

js：先要引入jquery的包

?
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(function(){
$(".select_checkBox").hover(function(){
$(".chartOptionsFlowTrend").css("display","inline-block");
},function(){
$(".chartOptionsFlowTrend").css("display","none");
});
});
</script>

阅读全文

0 0