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 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
Javascript中With语句用法实例
May 14 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
JS实现json数组排序操作实例分析
Oct 28 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
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
python封装对象实现时间效果
2020/04/23 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现购物车购物小程序
2018/04/18 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Python识别验证码的实现示例
2020/09/30 Python
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
安全生产投入制度
2014/01/29 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
自主招生推荐信范文
2014/05/10 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
招标保密承诺书
2015/01/20 职场文书
地球上的星星观后感
2015/06/02 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript