jq 下拉框
2024-10-19 10:31:23
<div class="alls">
<div class="item">
<div class="all">
<span class="alla">选择</span>
<span>
<div class="coinbig-c2c-sanj"></div>
</span>
</div> <div class="son">
<div class="son-input">
<img class="imgst" src="img/Group-2-copy.svg">
<input class="leftop" type="text">
</div>
<div class="son1">
<div class="as">00000000</div>
<div class="as">11111111</div>
<div class="as">22222222</div>
<div class="as">33333333</div>
<div class="as">44444444</div>
<div class="as">55555555</div>
<div class="as">66666666</div>
</div>
</div>
</div> </div>
<script>
if($('.all').length > 0) {
$('.all').on('click', function(e) {
var isShow = $(this).parents('.item').find('.son').is(':hidden');
isShow ? $(this).parents('.item').find('.son').slideDown(300) : $(this).parents('.item').find('.son').slideUp(300);
e.preventDefault();
e.stopPropagation();
});
}
if($('.as').length > 0) {
$('.as').on('click', function() {
$(this).parents('.item').find('.alla').text($(this).text());
$('.son').slideUp(300);
});
}
$(".leftop").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
})
$(".imgst").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
})
</script>
.all {
width: 100%;
height: 46px;
display: block;
position: relative;
color: rgba(255,255,255,1);
}
.item {
width: 100%;
height: 100%;
background: #2b4071;
line-height: 48px;
border-left: 1px solid #2a404f;
cursor: pointer;
border: 1px solid #2f4a64;
border-radius: 3px;
}
.alla {
margin-left: 10px;
font-size: 18px;
position: relative;
font-size: 14px;
}
.as {
padding-left: 10px;
font-size: 14px;
}
.as:hover {
background: #495689;
}
.son {
width: 100%;
display: none;
background-color: #15284c;
position: absolute;
top: 48px;
z-index:;
}
.item {
position: relative;
}
.coinbig-c2c-sanj {
width:;
height:;
border-width: 7px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
background: #2b4071;
position: absolute;
right: 9px;
top: 20px;
}
.zida {
font-size: 18px;
}
.sonall {
width: 100%;
top: 48px;
}
.imgst {
float: right;
width: 16px;
height: 16px;
margin-top: 12px;
margin-right: 10px;
}
.leftop {
float: left;
width: 80%;
height: 100%;
border: none;
background: #15284c;
color: #FFFFFF;
padding-left: 10px;
box-sizing: border-box;
}
.son-input {
width: 90%;
height: 40px;
border: 1px solid #495d9a;
margin: 10px auto;
}
.son1 {
overflow-y: auto;
max-height: 192px;
color: #EEEFF7;
}
.son1::-webkit-scrollbar {
width: 3px;
height: 0px;
}
.son1::-webkit-scrollbar-button {
background-color: #15284c;
}
.son1::-webkit-scrollbar-track {
background: #15284c;
}
.son1::-webkit-scrollbar-thumb {
background: #2a404f;
border-radius: 10px;
}
.son1::-webkit-scrollbar-corner {
background: #2a404f;
}
.alls {
width: 300px;
}
最新文章
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件，开源
- Oracle学习笔记五 SQL命令（三）：Group by、排序、连接查询、子查询、分页
- Scalaz（36）－ Free ：实践－Free In Action - 实用体验
- Matlab中的数据类型
- Nginx 笔记与总结（4）配置 server 访问日志
- 蓝牙Bluetooth技术手册规范下载
- [SQL]insert、update 表触发器应用的demo
- 用 Python 脚本实现对 Linux 服务器的监控
- python杂乱有关类与对象
- 【项目分析】利用C#改写JAVA中的Base64.DecodeBase64以及Inflater解码
- dedecms列表页调用子栏目列表，织梦首页调用栏目的子栏目标签代码
- ArrayList源码浅析（jdk1.8）
- mybatis源码解读(二)——构建Configuration对象
- 部署网站: 配置项目到iis上运行报目录错误
- WCF：一个棘手的问题
- java实验环境搭建，eclise下载与使用
- Codeforces Round #144 (Div. 2) D table
- 洛谷 P1164：小A点菜（DP/DFS）
- HDU 1978 How many ways（经典记忆化搜索）
- python之协程gevent模块