div自定义下拉框

发布时间:2017-6-25 6:27:56 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"div自定义下拉框 ",主要涉及到div自定义下拉框 方面的内容,对于div自定义下拉框 感兴趣的同学可以参考一下。

因为原生的下拉框不能修改其属性,很难美化下拉框。

所以自己用div简单自定义了一下下拉框,想美化直接修改css即可

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>div模仿下拉框</title><style>*{    padding: 0;    margin: 0;}.select-box{    width: 200px;    margin: 50px auto;    text-align: left;    text-indent: 5px;    /* border: 1px solid #ccc; */    padding: 10px;}.select-box .select-title{    height: 30px;    line-height: 30px;    display: block;    margin-bottom: 10px;    border: 1px solid #ccc;    padding: 5px 10px;    cursor:pointer;}.select-box ul{    border: 1px solid #ccc;}.select-box ul li{    height: 30px;    line-height: 30px;    list-style: none;    padding: 5px 10px;    cursor: pointer;}.select-box ul li.current{    background: #ebebeb;}.select-box ul li:not(:last-of-type){    border-bottom: 1px solid #ccc;}.none{    display: none;}.block{    display: block;}</style></head><body>    <div class="select-box">        <span class="select-title">web前端</span><!-- 下拉标题 -->        <ul class="select-con none">            <li>web前端</li>            <li>php</li>            <li>java</li>            <li>ios</li>            <li>安卓</li>        </ul>    </div><script src="jquery-3.0.0.min.js"></script>    <script>    $(document).bind("click",function(e){        var clickMe=$(e.target);/*获取点击元素*/        if(!clickMe.hasClass("select-title")){/*点击元素不是下拉框标题时*/            $(".select-box ul").addClass("none").removeClass("block");            if(clickMe.parent().hasClass("select-con")){/*点击元素是下拉选项时*/                var currenLiHtml=clickMe.html();/*获取点击的下拉选项HTML*/                $(".select-title").html(currenLiHtml);/*把点击的下拉选项HTML放到下拉标题*/                clickMe.addClass("current").siblings().removeClass("current");/*给点击的下拉选项加背景色*/            }        }else if($(".select-box ul").hasClass("none")){/*点击下拉标题时如果有none类的话*/            $(".select-box ul").addClass("block").removeClass("none");        }else if($(".select-box ul").hasClass("block")){/*点击下拉标题时如果有block类的话*/            $(".select-box ul").addClass("none").removeClass("block");        }    })</script></body></html>

上一篇:Nodejs基础:路径处理模块path总结
下一篇:iOS--NSDate的基本操作和常用核心功能

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。