div自定義下拉框組件

本文轉載自查看原文 2016-11-18 10:11 3682 JavaScript

因為原生的下拉框不能修改其屬性，很難美化下拉框。

所以自己用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*/
　　　　　　　　　　clickMe.parent().siblings(".select-title").html(currenLiHtml);/*把點擊的下拉選項HTML放到下拉標題*/
　　　　　　　　　　clickMe.addClass("current").siblings().removeClass("current");/*給點擊的下拉選項加背景色*/
　　　　　　　　}
　　　　　　}else if(clickMe.siblings(".select-con").hasClass("none")){/*點擊下拉標題時如果有none類的話*/
　　　　　　　　clickMe.parents("body").find(".select-con").addClass("none").removeClass("block");/*點擊下拉標題時如果有none類的話,全部下拉關閉，然后在展開當前的下拉*/
　　　　　　　　clickMe.siblings(".select-con").addClass("block").removeClass("none");

　　　　　　　　}else if(clickMe.siblings(".select-con").hasClass("block")){/*點擊下拉標題時如果有block類下拉是展開的話*/
　　　　　　　　$(".select-box ul").addClass("none").removeClass("block");
　　　　}


    })
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用element-ui的Clickoutside指令，解決點擊其他div關閉自定義下拉樹組件的下拉框 vue自定義下拉框組件自定義下拉框ComboBox 自定義下拉框實現自定義級聯下拉框自定義的可分類可搜索的下拉框組件 vue 下拉框自定義以及點擊空白空白處關閉下拉框 vue element自定義下拉框 Android 自定義spinner下拉框實現的實現 vue 自定義select下拉框