아주 초기에 정리하는 걸 잘 못해서 갑자기 다 녹음하고 싶은 생각이 들었습니다. 작은 데모도 비교적 간단해서 토론이나 수정은 환영합니다.
이전 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('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; } })();
위 내용은 div 시뮬레이션 선택 상자에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!