집 >웹 프론트엔드 >CSS 튜토리얼 >div 시뮬레이션 선택 상자에 대한 샘플 코드 공유

div 시뮬레이션 선택 상자에 대한 샘플 코드 공유

黄舟원래의: 2017-09-17 09:58:221912검색

아주 초기에 정리하는 걸 잘 못해서 갑자기 다 녹음하고 싶은 생각이 들었습니다. 작은 데모도 비교적 간단해서 토론이나 수정은 환영합니다.

이전 UI 디자인 초안의 선택 상자는 기본 스타일을 원하지 않았고, 기본 스타일을 변경하기가 너무 번거롭고 일부는 변경할 수 없어서 간단히 p-simulated 선택 상자를 작성하여 먼저 효과를 확인했습니다. :

코드 구현이 많지 않고 매우 간단합니다. 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(&#39;DOMContentLoaded&#39;,function(){                //注销时间，避免重复触发
                document.removeEventListener(&#39;DOMContentLoaded&#39;,arguments.callee,false);
                fn();        
                //运行函数
            },false);
        }else if(document.attachEvent){        //IE浏览器
            document.attachEvent(&#39;onreadystatechange&#39;,function(){                
            if(document.readyState==&#39;complete&#39;){
                    document.detachEvent(&#39;onreadystatechange&#39;,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;
    }
})();

위 내용은 div 시뮬레이션 선택 상자에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 너비 및 높이 적응형 div 요소 및 수직 중앙에 배치하는 방법다음 기사：CSS 너비 및 높이 적응형 div 요소 및 수직 중앙에 배치하는 방법