下拉框dropdown

点击前点击后，鼠标悬停制作思路：1、首先，在html中，有一个容器div [class="container"]，包裹所有用到的标签。这个容器是鼠标点击用的。2、容器内有一个div [class="c-dropdown"]用来定义下下拉框的宽度width：80px；行内块元素display：inline-block;

青柠知秋

4584人浏览 · 2018-04-12 22:28:19

青柠知秋 · 2018-04-12 22:28:19 发布

点击前

点击后，鼠标悬停

制作思路：

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;
}

;(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);

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

基于docker的test-containers环境百宝箱

笔者语录：我开了个公众号【Java你我他】，欢迎大家关注。在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其主要针对测试领域、背靠Docker实现环境百宝箱功能。 test-containers：你要的环境，我都有~ 假设我们现在需要一个redis-clust