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的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
随机推荐
- E20180503-hm
in terms of 根据; 用…的话; 就…而言; 以…为单位; in term of 就……而言 argument n. 论据; 争论,争吵; [数] 幅角; 主题,情节; indicate ...
- 洛谷 - P1337 - 平衡点/吊打XXX
一眼看过去以为是模拟退火/随机增量之类的.感觉先跑个凸包,然后在凸包内随机转移. 根据力臂长度*重量计算每个方向的分力?判断一个点比原来的点更平衡,是指他们的合力更接近0?每次判断要遍历一次,使用n的 ...
- poj1308【并查集】
= =.如果输入的两个数相等.就不是一颗树啊,不能自己指向自己. 水.(瞎开的数组). //#include <bits/stdc++.h> #include<iostream> ...
- hdu1598 find the most comfortable road 枚举+最小生成树
#include<cstdio> #include<cstring> #include<algorithm> #define MAXN 210 #define IN ...
- PHP fgets 函数
<?php $handle=fopen("../good/html/1.txt","r"); ; //打开一个远程文件 $content="&q ...
- Aria's Loops
https://www.hackerrank.com/contests/101hack41/challenges/arias-loops 可以看我以前的笔记,http://www.cnblogs.co ...
- 看Facebook是如何优化React Native性能
原文出处: facebook 译文出处:@Siva海浪高 该文章翻译自Facebook官方博客,传送门 React Native 允许我们运用 React 和 Relay 提供的声明式的编程模型, ...
- NFS与AutoNFS实例
NFS概述: NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文 ...
- ionic之自定义图片
一个好的app,必须都有很好的ui设计师来设计界面,增强客户的体验,表现自己本身公司的特色,但是,在ionic中有些是无法用img标签直接引入图片,只能通过设定的css之后引入css. 页面: < ...
- 初学.net增删改查
分页显示 DAL: public List GetListByPager(int PageIndex, int PageSize, out int RowCount) { string sql = & ...