<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 下拉框的更多相关文章

  1. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  2. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

  5. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  6. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  7. JS实现下拉框选中不同的项,对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  8. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  9. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

随机推荐

  1. python 基本类型的创建方法

    1.int class int(object) | int(x=0) -> integer | int(x, base=10) -> integer | | Convert a numbe ...

  2. python __builtins__ license类 (41)

    41.'license', 许可证,执照 class _Printer(builtins.object) | interactive prompt objects for printing the l ...

  3. python slice 切片

    list,tuple,string,bytes对象可以进行切片处理,生成一个新的这些类的对象. 格式:li[start: stop: step] list切片: >>> li = [ ...

  4. Firefox下载安装fireBug提示下载出错的解决方案

    火狐官方扩展中心在国外,国内可能访问某一节点出现了问题.所以可能扩展无法安装,并且扩展更新可能出现问题,导致启动检查扩展更新过慢影响启动.我们可以通过修改系统hosts文件加速访问.修改hosts文件 ...

  5. SQL_MODE 的设置

    查看当前的 SQL_MODE SELECT @@sql_mode SELECT @@sql_mode 的执行结果 mysql> SELECT @@sql_mode; +------------- ...

  6. ubuntu 18 安装virtulenv以及virtualenvwrapper

    转自: https://www.jianshu.com/p/06533f19c4ad 首先安装pip,如果用的python3版本要安装pip3(自行google) sudo apt install v ...

  7. wpf 中AxShockwaveFlash重写以及屏蔽鼠标右键

    在wpf中需要用到flash播放swf或者图片,需要使用 AxShockwaveFlashObjects.dll和ShockwaveFlashObjects.dll 在项目中使用的时候遇到 问题1.使 ...

  8. 如何访问google?

    1:浏览器打开 uzer.me 网站(建议:火狐,不行就谷歌) 2:点击注册,注册一个账号 3:登录账号,进入如下界面,选择火狐浏览器 4:这样就可以进行国外的网站访问了

  9. [洛谷p2858] 奶牛零食

    题目链接: 点我 题目分析: 这是什么,区间dp吗?怎么大佬都在说区间dp的样子 完蛋区间dp都不知道是啥quq 于是使用了玄学的姿势A过了这道题 设dp[i][j][0]表示第i天,左边选了j个,当 ...

  10. Subsequence HDU - 3530

    Subsequence HDU - 3530 方法:单调队列区间最大最小 错误记录(本地写错)的原因:写成每次试着扩展右端点,却难以正确地处理"在多扩展右端点之后减去多扩展的部分" ...