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


Posted in Javascript onSeptember 29, 2014

效果图:

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

css:

<style type="text/css"> 
/* 带复选框的下拉框 */ 
ul li{ 
list-style: none; 
padding:0px; 
margin: 0px; 
} 

.select_checkBox{ 
border:0px solid red; 
position: relative; 
display:inline-block; 


} 
.chartQuota{ 
height:23px; 
float:left; 
display:inline-block; 
border:0px solid black; 
position: relative; 
} 

.chartOptionsFlowTrend{ 
z-index:300; 
background-color:white; 
border:1px solid 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: 0 none; 
border: 1px solid #ccc; 
line-height: 22px; 
padding: 0 5px; 
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: 1px solid #fff; 
margin-left: 15px; 
color: #2e91da; 
} 
</style>

html:

<div class="select_checkBox"> 
<div class="chartQuota"> 
<p> 
<a href="javascript:;" hidefocus="true" title="请选择指标"><span>选择指标</span> 
<b></b> 
</a> 
</p> 

</div><br> 
<div class="chartOptionsFlowTrend""> 
<ul> 
<li class=""><input type="checkbox" value="1"><span>浏览次数(PV)</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>独立访客(UV)</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>IP</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>新独立访客</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>访问次数</span> 
</li> 
</ul> 
<p> 
<a href="javascript:;" title="确定" hidefocus="true" class="a_0">确定</a><a 
href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a> 
</p> 
</div> 
</div>

js:

<script type="text/javascript"> 
$(function(){ 
$(".select_checkBox").hover(function(){ 
$(".chartOptionsFlowTrend").css("display","inline-block"); 
},function(){ 
$(".chartOptionsFlowTrend").css("display","none"); 
}); 
}); 
</script>
Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
javascript屏蔽右键代码
May 15 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
Node.js笔记之process模块解读
May 31 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 #Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 #Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 #Javascript
Javascript基础知识(二)事件
Sep 29 #Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 #Javascript
Javascript表单验证要注意的事项
Sep 29 #Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 #Javascript
You might like
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python调用Redis的示例代码
2020/11/24 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
党校学习自我鉴定
2014/02/24 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
讲文明倡议书
2015/04/29 职场文书
房贷收入证明范本
2015/06/12 职场文书
工作简报格式范文
2015/07/21 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
TS 类型收窄教程示例详解
2022/09/23 Javascript