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 相关文章推荐
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
vue slots 组件的组合/分发实例
Sep 06 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
vant中的toast层级改变操作
2020/11/04 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
详解Python中for循环的使用方法
2015/05/14 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python continue继续循环用法总结
2018/06/10 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python tkinter常用操作代码实例
2020/01/03 Python
基于matplotlib xticks用法详解
2020/04/16 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
Java软件工程师综合面试题笔试题
2013/09/08 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
高级销售求职信
2014/02/21 职场文书
2014高考励志标语
2014/06/05 职场文书
保护动物的标语
2014/06/11 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
党员读书活动心得体会
2016/01/14 职场文书
高一英语教学反思
2016/03/03 职场文书