div類比select選擇框的範例程式碼分享

最後更新：2017-09-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

不太擅長總結挺早的東西了，突然覺得都記錄下來，小demo也比較簡單，歡迎討論指正。

之前 ui的設計稿選擇框不想要預設樣式，預設樣式改起來也是太心塞，有的還改不了，所以乾脆自己寫了一個p類比的選擇框先看效果吧：

代碼實現不多，也都很簡單，js部分是純原聲的所以不需要引用其他架構就可以用：

先HTML部分：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>p類比select選擇框</title>        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <link href="css/customSelect.css" rel="stylesheet" />            </head>    <body>                <p class="custom-select-box">            <p class="select-box mui-inline" style="width: 220px;">                <span id="fisrt" data-show="0">1</span>                <ul class="custom-option-box">                    <li class="active"><span>1</span></li>                    <li><span>2</span></li>                    <li><span>3</span></li>                    <li><span>4</span></li>                </ul>            </p>                                    </p>                          <script src="js/customSelect.js"></script>                    </body></html>

css部分：

ul,li,p,span{    box-sizing: border-box;}.select-box ul,.select-box li {    list-style-type: none;    margin: 0;    padding: 0;    cursor: pointer;    background: #fff;}.select-box {    width: 100%;    position: relative;    background: #fff;}#fisrt {    display: block;    line-height: 40px;    width: 100%;    height: 40px;    padding: 0 15px;    padding-right: 20px;    border: 1px solid #ccc;    border-radius: 3px;    /*white-space: nowrap;*/    overflow: hidden;    cursor: pointer;}#fisrt.active {    border: 1px solid #F2C051;}#fisrt::after {    content: "";    display: block;    position: absolute;    top: 18px;    right: 10px;    width: 0;    height: 0;    border: 5px solid transparent;    border-top-color: #000;    background: #fff;}.custom-option-box {    display: none;    position: absolute;    left: 0;    top: 40px;    background: #fff;    border: 1px solid #ccc;    border-top-color: transparent;    z-index: 10000;}.custom-option-box li {    display: block;    line-height: 30px;    padding: 0 15px;    z-index: 10000;}.custom-option-box li:hover, .custom-option-box li.active {    background: #F2C051;}.custom-option-box span {    cursor: pointer;}

js部分：（js部分有一點粗糙，現放上來，這兩天會修改一下）

(function() {    ready(function() {            var option_box = document.getElementsByClassName("custom-option-box")[0],            select_box = document.getElementsByClassName("select-box")[0],            width;        option_box.style.display = "none"; //初始ul隱藏          width = select_box.offsetWidth; //select的寬度 預設 100%          option_box.style.width = width + "px"; //初始ul寬度                   document.getElementById("fisrt").addEventListener("click", function() {                    var isShow = this.dataset.show;                    if(isShow == 0) {                        this.dataset.show = 1;                        this.classList.add("active");                        this.nextElementSibling.style.display = "block"; //找到ul.son_ul顯示              } else {                            this.dataset.show = 0;                            this.classList.remove("active");                            this.nextElementSibling.style.display = "none"; //找到ul.son_ul顯示                          }        },false);                var option = option_box.getElementsByTagName("li");                for(var i = 0; i < option.length; i++){              option[i].onclick = function(){                  var fisrt = this.parentNode.previousElementSibling;                                var siblings = getSiblings(this);                fisrt.innerHTML = this.childNodes[0].innerText;                fisrt.dataset.val = this.dataset.val;                                this.classList.add("active");                                for(var i = 0;i<siblings.length;i++){                    siblings[i].classList.remove("active");                }                this.parentNode.style.display = "none";                fisrt.dataset.show = 0;                fisrt.classList.remove("active");            }               }             });        function ready (fn) {            if(document.addEventListener){        //標準瀏覽器            document.addEventListener('DOMContentLoaded',function(){                //登出時間，避免重複觸發                document.removeEventListener('DOMContentLoaded',arguments.callee,false);                fn();                        //運行函數            },false);        }else if(document.attachEvent){        //IE瀏覽器            document.attachEvent('onreadystatechange',function(){                            if(document.readyState=='complete'){                    document.detachEvent('onreadystatechange',arguments.callee);                    fn();                            //函數運行                                    }            });        }    }        function getSiblings (elm) {            var a = [];            var p = elm.parentNode.children;            for(var i = 0, pl = p.length; i < pl; i++) {                if(p[i] !== elm) a.push(p[i]);        }                return a;    }})();

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More