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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
webpack常用构建优化策略小结
Nov 21 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
php的控制语句
2006/10/09 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript比较文档位置
2008/04/08 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
jquery replace方法去空格
2017/05/08 jQuery
关于react-router的几种配置方式详解
2017/07/24 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python多继承原理与用法示例
2018/08/23 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
社会实践心得体会
2014/01/03 职场文书
ktv筹备计划书
2014/05/03 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
如何书写授权委托书?
2019/06/25 职场文书