点击前

点击后，鼠标悬停

制作思路：

1、首先，在html中，有一个容器div [class="container"]，包裹所有用到的标签。这个容器是鼠标点击用的。

2、容器内有一个div [class="c-dropdown"]用来定义下下拉框的

宽度width：80px；

行内块元素display：inline-block;

相对位置position：relative; （相对于自己原来的位置，也为 后代 定义了绝对位置的元素 提供对照的 父元素）

（重要的是位置，如果需要上下定位，加margin-top定位，不改变元素大小。

看它的父元素有没有定义text-align属性，有的话，和它设置margin-left也没啥关系）

它同时需要一个用于做点击动作click触发的后代选择器的 class="js-dropdown"

.on("click","选择器"，fn)

3、容器内有个input标签用来传值，隐藏的不显示，类型设置为type="hidden"。它相当于type="text" style="display:none"

css中： 隐藏不占用空间：display:none;

隐藏占用空间：visibility:hidden;

为标签定义一个name="参数名" ， 它的value="参数"先不用定义，通过js修改，

此时需要一个用于拿到值的class="js-dropdown__input"  这里通过点击 li 获取到值。

后台java可以拿到 参数名="参数"

4.接下来需要一个span标签用来显示选定的值和蓝色上箭头

❶它表面上来看是充当按钮的角色，给它定义一个class="c-button" 清除一下默认的样式，边框

它用来显示标签，需要以下个属性：

display:inline-block; 将它定义为行内块元素，为了让它拥有高度。

   overflow:visible;  overflow 属性规定当内容溢出元素框时发生的事情。

visible：内容不会被修剪，会呈现在元素框之外

white-space:nowrap; 强制内容不换行

要点击它出现下拉列表，这个span里的可以禁止选中文本（不禁止就把none改成text），为其增加属性：

-ms-user-select:none; /*IE10*/

-moz-user-select:none; /*火狐*/

-webkit-user-select:none; /*webkit浏览器*/ /*Chrome Safari Opero Google 傲游3,猎豹浏览器,百度浏览器*/

-khtml-user-select:none;/*早期浏览器*/ /*大部分不写？*/

user-select:none;

注：把最需要的写法写在最后，因为这是大趋势 ，最后一定会应用最后的最简单的写法，防止和前面写法展现效果和功能不同。

前辈的讲解：

http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/

ie6-9不支持该属性，支持标签属性 onselectstart="return false"

或者写js   document.span.onselectstart=function(){return false};

Opera12.5不支持该属性，支持私有的标签属性unselectable="on"

于是，可以在 <span onselectstart="return false;"  unselectable="on" >  不清楚在禁用js后能不能完美退化。

如果它在导航栏里，需要行内垂直居中 加属性 vertical-align:middle;

文字的格式，有些标签在框架里或之前有设定，可以把之前继承的格式去掉，也可以继承。

font:inherit; /*继承*/

text-transform:none; /*控制文本大小写*/

text-decoration:none; /*文本修饰*/

text-align:center; /*文本居中*/

还有一些其他，比如

border:0; 清除下它的边框，方便接下来设置样式

-webkit-appearance:none;   用来渲染样式，none去除系统默认appearance的样式，常用于IOS下移除原生样式。

❷当鼠标悬停在其上：hover(如果它有：link和：visited，要放在这2个之后，没有就随意了)或：focus

看是否需要加边框轮廓，不需要就写 outline：none;

这里也需要加文本修饰，所以 text-decoration:none;

/*hover、active、focus这三个伪类必须是focus、hover、active的顺序

在focus状态下，也需要触发hover和active

触发active一定会先触发hover，所以active要放在hover后面

hover、active、focus称为动态伪类，可应用于任何元素

IE7不支持：focus，IE6只支持给<a>设置：hover和：active

❸另外，这个span没有被禁用时，鼠标悬浮或点击的样式应该是手指样式

.c-button:not(:disabled){

cursor:pointer; }

：disabled选择器匹配每个被禁用的元素

：not（：displayed）匹配没有禁用的元素

所以当这个按钮没被禁用时，鼠标悬浮就是手指向上箭头了。

下面开始给它设置的样式 class="c-button--dropdown"

先设置下内容加padding加border的总大小，用了border-box属性，这样一个width就搞定了。

box-sizing:border-box; /*接下来设置的width等于内容加padding加border，高度同*/

width:80px;

height:30px;

padding:4px 39px 10px 11px; /*为了给箭头留出空间*/

接下来设置字体

color：#48A1FB;

font-size：14px;

设置背景和边框：

background-color：#fff;

border:1px solid #B7D4EC;

border-radius:3px;

如果鼠标悬浮背景有变化，可以设置过渡 从正常到：hover

-webkit-transition:background-color .2s linear; /*过渡的属性是背景 时间是0.2秒 以相同速度开始至结束的过渡效果*/

transition:background-color .2s linear;

设置鼠标悬停状态显示，因为我设置的颜色前后相同，所以看不出变化。

.c-button--dropdown:hover{

background-color:#fff;

}

接下来把箭头做出来，用：after   （:after选择器在被选元素的内容后面插入内容。用content属性来指定要插入的内容。）

.c-button--dropdown:after{

content:""; /*因为做箭头，内容就是空了*/

position:absolute; /*父元素设置了relative，所以它相对于父元素绝对定位*/

top:6px;

right:7px;

/*制作箭头，将宽度和高度设置为0，边的长度就是等边三角形的底边长，哪个当底边，就给哪个边设置颜色*/

width:0;

height:0;

border:6px solid transparent;

border-bottom-color:#48A1FB; /*因为是上箭头，所以设置底边*/

}

5.需要一个列表ul

定义一个class="c-dropdown__list"的ul列表

position: absolute;
list-style: none;
top: 125%;
left: 0;
width: 100%;
margin: 5px 0 0 0;
padding: 6px 0;
text-align:center;
opacity: 0;
visibility: hidden;
border-radius: 1px;
background: #fff;
-webkit-transition: opacity .25s linear, top .25s linear;
transition: opacity .25s linear, top .25s linear;

6.需要一个span制作列表上的箭头

上代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery2.2.2.min.js"></script><link rel="stylesheet" href="./css/st.css">
</head>
<body>
<div class="container"><div class="c-dropdown js-dropdown"><!--input是传值的，span才是显示在界面的-->
        <input type="hidden" name="province" class="js-dropdown__input"><span class="c-button c-button--dropdown js-dropdown__current">全国</span><ul class="c-dropdown__list"><li class="c-dropdown__item" data-dropdown-value="quanguo">全国</li><li class="c-dropdown__item" data-dropdown-value="beijing">北京</li><li class="c-dropdown__item" data-dropdown-value="shanghai">上海</li><li class="c-dropdown__item" data-dropdown-value="beijing">河南</li><li class="c-dropdown__item" data-dropdown-value="beijing">新疆</li><li class="c-dropdown__item" data-dropdown-value="beijing">西藏</li><li class="c-dropdown__item" data-dropdown-value="beijing">内蒙古</li><li class="c-dropdown__item" data-dropdown-value="beijing">黑龙江</li><li class="c-dropdown__item" data-dropdown-value="beijing">全国</li><li class="c-dropdown__item" data-dropdown-value="beijing">北京</li><li class="c-dropdown__item" data-dropdown-value="beijing">上海</li><li class="c-dropdown__item" data-dropdown-value="beijing">河南</li><li class="c-dropdown__item" data-dropdown-value="beijing">新疆</li><li class="c-dropdown__item" data-dropdown-value="beijing">西藏</li><li class="c-dropdown__item" data-dropdown-value="beijing">内蒙古</li><li class="c-dropdown__item" data-dropdown-value="heilongjiang">黑龙江</li></ul><span class="c-triangle"></span></div>
</div>
<script src="js/in.js"></script>
</body>
</html>

css 父元素放相对定位 子元素放绝对定位

*{padding:0;
    margin:0;
    box-sizing:border-box;
}
*，*：before, *:after{box-sizing:border-box;
}
html{-webkit-tap-highlight-color: transparent;
}
body {background: #D5E6F4;
    font-family: "Open Sans", "Arial", sans-serif;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}
/**
 * Component: Dropdown
 * --------------------------------------------------
 */
.c-dropdown {width:80px;
    position: relative;
    display: inline-block;
    text-align: left;
    margin-top:22px;
}
.c-dropdown__list {margin: 5px 0 0 0;
    padding: 6px 0;
    list-style: none;
    position: absolute;
    top: 125%;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    border-radius: 1px;
    background: #fff;
    -webkit-transition: opacity .25s linear, top .25s linear;
    transition: opacity .25s linear, top .25s linear;
    text-align:center;
}
/*当下拉展开时，背景才是不透明的*/
.c-dropdown.is-open .c-dropdown__list{width:82px;
    opacity: 1;
    visibility:visible;
    top:125%;
    position: absolute;
    z-index:-1;
    box-sizing:border-box;
    border:1px solid #B7D4EC;
}
/*三角形*/
.c-triangle{opacity: 0;
    visibility: hidden;
}
.c-dropdown.is-open .c-triangle{opacity: 1;
    visibility:visible;
}
.c-triangle:after,.c-triangle:before {border: 12px solid transparent;
    border-bottom: 12px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 20.5px;
    left:28px;
    content: ' ';
}
.c-triangle:before {border-bottom-color: #B7D4EC;
    top: 19px;
}
.c-dropdown__item {padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: background-color .25s linear;
    transition: background-color .25s linear;
}
.c-dropdown__item:hover {background-color: #EBEEF3;
    color: #48A1FB;
}
/**
 * Component: Button
 * --------------------------------------------------
 */
.c-button {-webkit-appearance: none;
    margin: 0;
    border: 0;
    overflow: visible;
    font: inherit;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;  /*强制span不换行*/
}
.c-button:hover, .c-button:focus {outline: none;
    text-decoration: none;
}
.c-button:not(:disabled) {cursor: pointer;
}
/**
 * Component: Button
 * Modifier: Dropdown
 * --------------------------------------------------
 */
.c-button--dropdown {box-sizing:border-box;
    width:80px;
    max-width:100px;
    height:30px;
    padding: 4px 39px 10px 11px;
    background-color: #fff;
    color:#48A1FB;
    font-size: 14px;
    border-radius: 3px;
    border:1px solid #B7D4EC;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
.c-button--dropdown:hover {background-color: #fff;
}
/*箭头*/
.c-button--dropdown:after {content: "";
    position: absolute;
    top: 6px;
    right: 7px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #48A1FB;
}

js

;(function ($,window,document,undefined) {'use strict';
   //定义最外层容器
    var $container=$('div.container');
    /*click后的.ui和.dropdown是它的命名空间，方便移除用的，".js-dropdown"是容器的后代，
      点击容器，在后代元素上执行函数。*/
    $container.on('click.ui.dropdown', '.js-dropdown',function (e) {//取消事件的默认动作
        e.preventDefault();
        //设置移除类，有则移除，没有就加上
        $(this).toggleClass('is-open');
    });
    //'.js-dropdown [data-dropdown-value]'用于过滤器的触发事件的选择器元素的后代
    $container.on('click.ui.dropdown', '.js-dropdown [data-dropdown-value]', function (e) {e.preventDefault();
        var $item= $(this);
        //遍历所有class=js-dropdown的父元素
        var $dropdown= $item.parents('.js-dropdown');
        //更新input的值为选中的li的值
        $dropdown.find('.js-dropdown__input').val($item.data('dropdown-value'));
        //更新span的值为选中li的值
        $dropdown.find('.js-dropdown__current').text($item.text());
    });

    $container.on('click.ui.dropdown',function (e) {var $target=$(e.target);
        if(!$target.parents().hasClass('js-dropdown')){$('.js-dropdown').removeClass('is-open');
        }});

})(jQuery,window,document);

下拉框dropdown相关推荐

  1. bootstrap实现下拉框dropdown选中select option 美爆了

    https://www.cnblogs.com/zou1234/p/7884053.html#commentform bootstrap 官网的例子有点坑,它只给你下拉,并且美化了,但你点击下拉却不能 ...

  2. 下拉框dropDown实现

    如何实现点击面板外部收起面板,点击内部选中面板内容 实现思路: 给dropDown面板里的所有元素埋class,然后在面板最外层通过冒泡来来判断当前点击的内容是不是带有该class,来判断当前点击的是 ...

  3. js实现下拉框多选_bootstrap基础快速入门-10 dropdown下拉框

    大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解.有疑问留言交流哦. bootstrap是进阶html5很基础常用的前端框架,可以做自适应漂亮的界面 ...

  4. 好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING

    插件描述:今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的 今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的 预览图 width="474 ...

  5. 【UGUI】Dropdown下拉框

    Dropdown 组成 Dropdown组件 这里的Interactable,Transition,Navigation属性都是与Button组件的相同 看看后面的不同的属性 Template:下拉列 ...

  6. 下拉框插件 dropdown.js介绍

    在项目中使用到了dropdown.js插件,把使用的方法以及注意点记录了下来. 插件描述:Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和 ...

  7. html input dropdown,jQuery轻量级下拉框插件Dropdown

    插件描述:Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和两种模式. 更新时间:2017/7/7 上午11:45:40 更新说明:修复 热 ...

  8. 使用SeleniumWebdriver操作下拉框菜单DropDown

    本文将介绍如何处理下拉框选项和多选操作,首发于微信公众号[软测小生] 从下拉框中选择–>选项 在控制下拉框之前,我们必须做以下两件事: 导入包org.openqa.selenium.suppor ...

  9. 两个下拉框相关联ajax,触发第二个下拉框以显示基于从第一个下拉框中选择的值的值ajax...

    我有两个引导程序下拉框.当我们点击另一个下拉菜单时,其中一个会根据用户选择的国家显示来自数据库的所有国家名称,另一个下拉菜单应该选择状态. 当我点击一个下拉菜单时,我做了一个ajax请求来显示国家名称 ...

最新文章

  1. JSP中是EL表达式与JSTL
  2. Netty和RPC框架线程模型分析
  3. RAC起单实例make
  4. 【Vue】 vue-Router children 子组件空白显示，没有内容
  5. 人活着系列之芳姐和芳姐的猪（Floyd）
  6. 随笔1106-练习例题
  7. JAVA——基于HttpClient的正方教务系统[1999-2020]模拟登录基本解决方案
  8. 【原】unity shader(3)反射贴图
  9. idea之springboot端口被占用/跳转到login
  10. 数论入门基础（同余定理/费马小定理/扩展欧几里德算法/中国剩余定理）～
  11. ITIL学习笔记——核心流程之：服务级别管理
  12. python实现具有删除空格、英文标点替换、英文单词大写等功能的文字排版工具
  13. Java文件导入 project .mpp文件解析导入 并通过父子级关系或WBS码构造层级关系
  14. 【Python蓝桥杯】印章 共有n种图案的印章，每种图案的出现概率相同。小A买了m张印章，求小A集齐n种印章的概率。
  15. 1109: 方块消除 blocks
  16. pythonreshape函数三个参数_Python Numpy中reshape函数参数-1的含义
  17. 如何将动态URL静态化！
  18. NLTK-007：分类文本（文档情感分类）
  19. 业务需求与系统需求的区别
  20. 初识Dockerfile与实现容器间的数据同步

热门文章

  1. python 16进制转中文
  2. xjb java,java – 使用保留下划线的xjb覆盖JAXB属性名称
  3. 工作室课题—质数的后代
  4. 蓝桥杯 油漆面积【第八届】【省赛】【A组】线段树扫面线/求矩形相交面积/模拟
  5. 计算机网络最大传输速率求解
  6. 怎样自制干果核桃仁蛋糕
  7. CUDA编程 基础与实践 学习笔记（一）
  8. Cause: java.sql.SQLException: Error setting driver on UnpooledDataSource.的解决方法
  9. 水处理小知识：养殖场废水脱色剂除色又除臭
  10. Taste of programmer——GAD