<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. 洛谷 - P1111 - 修复公路 - 并查集

    https://www.luogu.org/problemnew/solution/P1111 并查集的水题,水题都错了好多发. 首先并不是有环就退出,而是连通分支为1才退出,每次合并成功连通分支才会 ...

  2. 《高性能iOS 应用开发》之降低你 APP 的电量消耗

    在编写高性能 代码时, 电量消耗是一个需要重点处理的重要因素, 就执行时间和 CPU 资源的利用而言, 我们不仅要实现高效的数据结构和算法, 还需要考虑其他的因素,如果某个应用是个电池黑洞,那么一定不 ...

  3. bzoj2064: 分裂(状压dp)

    Description 背景: 和久必分,分久必和... 题目描述: 中国历史上上分分和和次数非常多..通读中国历史的WJMZBMR表示毫无压力. 同时经常搞OI的他把这个变成了一个数学模型. 假设中 ...

  4. 洛谷P3537 [POI2012]SZA-Cloakroom(背包)

    传送门 蠢了……还以为背包只能用来维护方案数呢……没想到背包这么神奇…… 我们用$dp[i]$表示当$c$的和为$i$时,所有的方案中使得最小的$b$最大时最小的$b$是多少 然后把所有的点按照$a$ ...

  5. nginx部署h5项目

    1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...

  6. notepad++插件选项没有plugin manager解决

    在 https://github.com/bruderstein/nppPluginManager/releases 下载最新的PluginManager_vXXXX_UNI.zip 解压,将里面的p ...

  7. 有哪些值得学习的spring boot开源项目?

    1. awesome-spring-boot 首先给大家介绍的就是Spring Boot 中文索引,这是一个专门收集 Spring Boot 相关资料的开源项目,也有对应的导航页面. 产品主页 htt ...

  8. iOS 优雅地隐藏导航栏NavigationBar (Objc)

    @interface FSViewController () <UINavigationControllerDelegate> @end @implementation FSViewCon ...

  9. 使用PlSQLDeveloper工具查询Oracle会话数

    PlSQLDeveloper工具提供了会话管理功能. 能够查询会话内容.杀死会话.查看会话SQL等操作. 常用的会话查询SQL如下: -- 查询所有会话 select * from v$session ...

  10. HAL之串口

    在STM32cubeMX中 1 外设功能打开 2 GPIO对应管脚的串口功能打开 3 对应GPIO引脚的配置 4串口的配置,中断的设置 在MDK中 5.1 串口初始化MX_USART1_UART_In ...