js hover 下拉框
<div class="box">
<div class="a f">111111</div>
<div class="a-box">
<div class="b d">111111</div>
<div class="b">222222</div>
<div class="b">333333</div>
</div>
</div>
.box {
width: 100px;
} .a,
.b {
width: 200px;
height: 30px;
background: red;
/*border: 1px solid #000;*/
} .a.f:after {
content: url(x-.g.png);
width: 10px;
height: 10px;
display: inline-block;
} .a-box {
display: none;
} .a:after {
content: url(d-g.png);
width: 10px;
height: 10px;
display: inline-block;
}
/*.b:after {
content: url(x-.g.png);
width: 10px;
height: 10px;
display: inline-block;
}*/ .d {
display: none;
}
$(function() {
$('.box').on('mouseenter', function() {
$('.a-box').css('display', 'block');
$(".a").removeClass('f');
})
$('.box').on('mouseleave', function() {
$('.a-box').css('display', 'none');
$(".a").addClass('f');
})
$('.box').on('click', '.a', function() {
$('.a-box').css('display', 'none');
$(".a").addClass('f');
})
$('.a-box').on('click', '.b', function() {
$('.d').removeClass('d');
$(this).addClass('d');
$('.a').remove();
$('.box').prepend($(this).clone().attr('class', 'a f'));
$('.a-box').css('display', 'none');
})
})
类名为了方便随便命名的,当然开发过程中不允许这样命名,为了大家看的明白一些
js hover 下拉框的更多相关文章
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- 关于css中hover下拉框的一个bug
写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...
- JS 实现下拉框去重
JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...
- JS 实现下拉框回显
JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...
- JS实现下拉框选中不同的项,对应显示不同的信息
实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...
- 快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
随机推荐
- 利用ffmpeg0.6.1把.h264纯码流打包成.mp4 .avi等格式 (转载)
转自:http://cache2.weidaohang.org/h/index.php?q=aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1cWluZ183MzkvYXJ0aWNsZS ...
- mq4参考
更新: 2017/05/24 其实也就是照搬文档,主要是用到一个记一个.方便掌握 ----------------------------------------------------------- ...
- 2016 Multi-University Training Contest 1 GCD【RMQ+二分】
因为那时候没怎么补所以就分到了未搞分组里!!!然后因为标题如此之屌吧= =点击量很高,然后写的是无思路,23333,估计看题人真的是觉得博主就是个撒缺.废话不多说了,补题... update////2 ...
- Codeforces 1000 (A~E)
A Codehorses T-shirts 相同长度之间互相转化即可 #include<iostream> #include<cstdio> #include<cstri ...
- robotframework自动化系列:文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- Robotframework自动化系列:筛选结果数量统计
Robotframework自动化系统:筛选结果数量统计 上一个节点已经可以随机选中某一个下拉框的值,我们在使用evaluate随机数的时候需要计算下拉选项总数,这时候我们是手工计算输入的:这时候如果 ...
- ipset 学习总结
用途:当机器受到网络攻击时,使用 iptables 封 IP,有时候可能会封禁成千上万个 IP,如果添加成千上万条规则, 在一台注重性能的服务器或者本身性能就很差的设备上就不在适用了.ipset 就是 ...
- 题解报告:hdu 2141 Can you find it?(二分)
Problem Description Give you three sequences of numbers A, B, C, then we give you a number X. Now yo ...
- adb的含义
ADB全名Andorid Debug Bridge. 是一个Debug工具.为何称之为Bridge呢?因为adb是一个标准的C/S结构的工具, 是要连接开发电脑和调试手机的.包含如下几个部分: 1.C ...
- Unity Mesh 初体验
什么是Mesh Mesh是Unity中的一个组件,称为网格组件.通俗的讲,Mesh是指模型的网格,3D模型是由多边形拼接而成,而一个复杂的多边形,实际上是由多个三角面拼接而成.所以一个3D模型的表面是 ...