下拉框dropdown

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

青柠知秋

4616人浏览 · 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全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

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

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