html级联选择器,jquery实现 级联选择器
看到UI在做设计图 有级联选择器 就先写写 (项目还在用jquery~~~~~~)
先上效果图
css
.box{
position: relative;
width: 800px;
height: 800px;
background: #2A363E;
}
.input{
font-size: 20px;
color: #fff;
}
.input>input{
width: 500px;
height: 50px;
font-size: 20px;
color: #fff;
border: 2px solid aqua;
background: #2A363E;
padding:0 10px;
}
.select{
position: absolute;
top: 70px;
left: 475px;
}
.select>ul{
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
}
.select>ul::before
{
content: "";
position: relative;
display:inline-block;
top: -23px;
left:90px;
border-bottom: 10px solid #0A1824;
border-right: 10px solid transparent;
border-left: 10px solid transparent
}
.select>ul>li{
position: relative;
}
.select>ul>li>p{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul{
position: absolute;
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
left: 155px;
top: -5px;
display:none
}
.select>ul>li>ul::before
{
content: "";
position: absolute;
display:inline-block;
top: 10px;
left:-10px;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid #0A1824;
}
.select>ul>li>ul>li{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul>li:hover{
color: aqua;
background: #474F55;
}
.select>ul>li>p:hover{
color: aqua;
background: #474F55;
}
html
巡查点位:
变电东区1
东1号位
东2号位
东3号位
东4号位
变电西区2
西1号位
西2号位
西3号位
西4号位
变电南区3
南1号位
南2号位
南3号位
南4号位
变电北区4
北1号位
北2号位
北3号位
北4号位
js
var val = ''
$('.input').on('click', () => {
$('.select>ul').show()
})
$('.select>ul>li>p').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).parent('li').siblings().children('p').css({
color: '#474F55',
background: '#0A1824'
})
val = $(this).text()
$('.input>input').val(val)
$(this).siblings('ul').show()
$(this).parent('li').siblings().children('ul').hide()
})
$('.select>ul>li>ul>li').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).siblings().css({
color: '#474F55',
background: '#0A1824'
})
$('.input>input').val(val + '/' + $(this).text())
$(this).css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul>li>p').css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul').hide()
})
注: 真正的使用不要像一样 >>*>没完 还有.parent().siblings().children() 这样没完 我只是写个小dome 真正的写的时候 我会多起几个类名;
html级联选择器,jquery实现 级联选择器相关推荐
- django orm级联_django+jquery 实现级联选择菜单
最近在做一个基于django框架的项目,需要实现级联选择菜单,比如省-市-区,记录下来,希望能帮助碰到同样问题的人. ----------------------------------------- ...
- Jquery有哪些选择器
http://zhidao.baidu.com/link?url=qYC_qYA1G6dAgWcv1EVwDQyQrXQnVotFZwqoM4RK3O16EakTTnQnCWuCMCIWV33iGaP ...
- jQuery的内容选择器和属性
jQuery的选择器 jQuery的内容选择器 :empty :parent :contains(text) :has(selector) $(function () {//:empty 作用是找内容 ...
- jquery表单选择器input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:button、:file、:hidden
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery表单选择器 jquery表单选择器,包括:input.input.:text.:password.:radio.:c ...
- jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
- jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- 转:初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
最新文章
- IntelliJ IDEA 的 .idea 目录加入.gitignore无效的解决方法
- 【mycat】分库分表
- 噩耗...............
- 53-python界面-wxForm
- 全新 Win 9 概念 界面漂亮极了
- tomcat内存溢出
- 算法积累之处理数组数据
- kafka指定分区消费
- openGauss 2.1.0 闪回特性
- ES6--async函数
- SQL操作结果集-并集,差集,交集,结果集排序
- 《深入浅出WPF》视频列表
- VAX 经常Parsing 整个项目/CPU负载过高解决办法
- 十进制转化为十二进制
- IDEA切换主题(换背景颜色)
- 24节气—小雪海报、文案分享。雨凝成雪,万物冬藏。
- tt服务器系统,TT服务器使用手册.doc
- iPhone再添新配色: 黄铜色?
- 电脑没有鼠标怎么打开计算机,电脑鼠标右键菜单没有打开方式选项怎么办
- postgis常用的函数
热门文章
- 20140719中国互联网公司市值排名TOP20
- 比有钱更重要的,是拥有“选择权”(深度好文)
- 全国大江大河实时水情数据下载
- 合肥学院ACM集训队第一届暑假友谊赛 B	FYZ的求婚之旅 D	计算机科学家 F	智慧码	 题解...
- 力扣 299 猜数字游戏(java)
- Gephi报错cannot load even default layout, using internally predefined configuration解决方法
- web前端---css基础
- 利用ODI将Oracle US7ASCII编码的数据库迁移至UTF8编码数据库
- 用openCV取出图片中的四边形
- 数据结构软件测试,资讯详情-java常见数据结构-柠檬班-自动化测试-软件测试培训-自学官网...