前端 自定义下拉列表框

今天在公司里，遇到了一个很简单的问题，有一个UI样式固定的下拉列表框。当我拿到这个ui的时候，第一感觉就是简单的select标签就可以解决问题，但是后面在改样式的过程中，遇到了许许多多的问题，包括无法修改选中后默认的蓝色框，option的hover无法改变等等。。。

在许多次尝试失败后，我决定，定义一个属于自己的下拉列表，当然啦，我并不想用那些组件，虽然用组件很快吧，但是当一个项目中用的组件多了以后，总是会出现好多不可控的因素，相信在座的大牛都比我懂的多，那就开始这次体验吧~~

效果图：

嗯。。学了半天gif图还是不会，等小编以后再补上图，后面有源码，大家直接复制即可。。

理一下思路：

• 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
• li 标签下的就是我们的标签
• ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
• 在div 中分为两块 span 和 img
• span 就是文字”请选择一个标签”
• img 则是向下向上的图标
• 点击后，图标会变 span会变 div的边框会变 当然你也可以随意为li（你的标签）添加一些hover样式

因为公司项目中有jquery，所以有部分jquery的代码，当然你想用js原生实现也可以哦
好了，就那么简单，让我们来写一次自己的组件吧

---

html代码

<ul class="dropdown" tabindex="1">        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">            <span>请选择标签</span>            <div class="dp-img">                <img src="images/dp-down.png" width="15" height="20">            </div>        </div>        <li class="dp-list hide">标签一</li>        <li class="dp-list hide">标签二</li>        <li class="dp-list hide">标签三</li>        <li class="dp-list hide">标签四</li></ul>

简单分析下上述代码，ul，li 结构 下面分为一个<div>和若干个<li>标签。
<div class="dp-select">下有一个<span>用来装默认标签文字，还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
<li>就是各位一个个的标签啦，我给它定义了一个‘dp-list’的样式
html就只有那么多了，接下来让我们看看css

css代码

<style>    .dropdown{        width: 150px;        height: 30px;        line-height: 30px;        padding:0px;        cursor: pointer;        outline: 0;        border:1px solid #8a8a8a;    }    .dropdown .dp-list{        list-style: none;        width: 150px;        height: 30px;        line-height: 30px;        border-left: 1px solid #8a8a8a;        border-right: 1px solid #8a8a8a;        border-bottom: 1px solid #8a8a8a;        position: relative;        left: -1px;    }    .dropdown .dp-list:hover{        background: #8a8a8a;        color: #ffffff;    }    .dropdown .dp-img{        float: right;        width: 20px;        height: 30px;        display: flex;        justify-content:center;        align-items:center;        border-left: 1px solid #8a8a8a;    }    .hide {        display: none;    }</style>

css属实没啥好说的，dp-img 也就是我放图标的那个小div,我这里采用的是flex布局，让图标居中。
当然，如果你们想用background使图标居中也没问题啦，个人习惯而已~
hide是我定义的一个隐藏li标签的样式，为了让js代码写的少一些。如果不想写，在js中改成display：none 就可以咯

js代码

<script type="text/javascript">    $('.dropdown .dp-select').on('click',function(){        if($('.dropdown li').hasClass('hide')){            //点击后更改图标            $('.dp-img img').attr('src','images/dp-up.png');            //显示li标签            $('.dropdown li').removeClass('hide');            //加点点击样式            $('.dropdown').css('border','1px solid lightblue');            $('.dropdown .dp-img').css('border-left','1px solid lightblue');        }else{            //点击后更改图标            $('.dp-img img').attr('src','images/dp-down.png');            //显示li标签            $('.dropdown li').addClass('hide');            //继续点击样式            $('.dropdown').css('border','1px solid #8a8a8a');            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');        }    });    //点击li 标签后发生的事件    $('.dropdown li').on('click',function(){        var text = $(this).text();        console.log(text);        $('.dp-select span').text(text);        //点击后更改图标        $('.dp-img img').attr('src','images/dp-down.png');        //显示li标签        $('.dropdown li').addClass('hide');        //继续点击样式        $('.dropdown').css('border','1px solid #8a8a8a');        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');    });    //失去焦点发生的事件    $('.dropdown').blur(function(){        //点击后更改图标        $('.dp-img img').attr('src','images/dp-down.png');        //显示li标签        $('.dropdown li').addClass('hide');        //继续点击样式        $('.dropdown').css('border','1px solid #8a8a8a');        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');    });</script>

终于看到js了，其实可以发现js代码并不多，好吧，我承认，我写的还是比较冗余的。
如果精简下的话可能会更少哦！

pass:这里我用jquery的，不喜欢用jquery的话，可以自己去把其中一些方法替换成js原生~

第一个方法，为dp-select元素添加了click事件。
解释下，就是你点默认的那个框的时候，下面的li标签会显示，图标img（就是一开始是向上的图标）你点了以后，就会换成向下的图标。
jquery.css是我自己加的一些样式，大家可以自己修改。

第二个方法，给li标签的点击事件，很简单，点击以后替换span中的text值，其他跟上面方法一样，换图标，换样式。。

第三个方法，这是感觉最有意思的一个方法了，给div添加blur方法。
因为我们都知道，一个下拉列表框，你在不属于它的地方点击后，应该会缩回去吧。
为了实现这个效果，我采用给最大的ul标签添加tabindex=“1”
这样ul标签就可以跟input框一样，使用blur,focus`等等方法了。
失去焦点后，自然是隐藏li 修改样式，修改图标。

差不多介绍完啦，第一次写博客，很菜。大家在实践过程中会发现ul标签是不是显得没有那么必要？
当然每一个自己写的小东西需要不停地去优化，以前我用过无数组件，但是自己写一个很小很小的组件的时候，也会发现好多的问题。需要与大家共勉。

对于以上写的下拉列表，接下来需要考虑的就是封装了。

如果可以这样子调用我们的自己定义的下拉列表框，会不会很酷？

<ul class="dp-default my-dark">        请选择标签        <li class="dp-list">标签一</li>        <li class="dp-list">标签二</li>        <li class="dp-list">标签三</li>        <li class="dp-list">标签四</li></ul>

小结

这样子，感觉像自己创建一个组件一样。下一篇会详细讲讲如何将自己写出来的小东西，再更加进一步的封装，其中还包括对html元素进行封装等等。

就到这里吧，附上源码。希望能有更多的机会跟大家交流~

源码

注意：有俩个图标在 大家可以直接另存为这两张图
Jquery的话。。自己在网上找一个jquery.js就好了！

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8" />    <!--  img  #8a8a8a -->    <style>        .dropdown{            width: 150px;            height: 30px;            line-height: 30px;            padding:0px;            cursor: pointer;            outline: 0;            border:1px solid #8a8a8a;        }        .dropdown .dp-list{            list-style: none;            width: 150px;            height: 30px;            line-height: 30px;            border-left: 1px solid #8a8a8a;            border-right: 1px solid #8a8a8a;            border-bottom: 1px solid #8a8a8a;            position: relative;            left: -1px;        }        .dropdown .dp-list:hover{            background: #8a8a8a;            color: #ffffff;        }        .dropdown .dp-img{            float: right;            width: 20px;            height: 30px;            display: flex;            justify-content:center;            align-items:center;            border-left: 1px solid #8a8a8a;        }        .hide {            display: none;        }    </style></head><body>    <ul class="dropdown" tabindex="1">        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">            <span>请选择标签</span>            <div class="dp-img">                <img src="images/dp-down.png" width="15" height="20">            </div>        </div>        <li class="dp-list hide">标签一</li>        <li class="dp-list hide">标签二</li>        <li class="dp-list hide">标签三</li>        <li class="dp-list hide">标签四</li>    </ul>    <ul class="dp-default my-dark">        请选择标签        <li class="dp-list">标签一</li>        <li class="dp-list">标签二</li>        <li class="dp-list">标签三</li>        <li class="dp-list">标签四</li>    </ul></body>     </html><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript">    $('.dropdown .dp-select').on('click',function(){        if($('.dropdown li').hasClass('hide')){            //点击后更改图标            $('.dp-img img').attr('src','images/dp-up.png');            //显示li标签            $('.dropdown li').removeClass('hide');            //加点点击样式            $('.dropdown').css('border','1px solid lightblue');            $('.dropdown .dp-img').css('border-left','1px solid lightblue');        }else{            //点击后更改图标            $('.dp-img img').attr('src','images/dp-down.png');            //显示li标签            $('.dropdown li').addClass('hide');            //继续点击样式            $('.dropdown').css('border','1px solid #8a8a8a');            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');        }    });    失去焦点发生的事件    $('.dropdown').blur(function(){        //点击后更改图标        $('.dp-img img').attr('src','images/dp-down.png');        //显示li标签        $('.dropdown li').addClass('hide');        //继续点击样式        $('.dropdown').css('border','1px solid #8a8a8a');        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');    });    点击li 标签后发生的事件    $('.dropdown li').on('click',function(){        var text = $(this).text();        console.log(text);        $('.dp-select span').text(text);        //点击后更改图标        $('.dp-img img').attr('src','images/dp-down.png');        //显示li标签        $('.dropdown li').addClass('hide');        //继续点击样式        $('.dropdown').css('border','1px solid #8a8a8a');        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');    });</script>