온라인에서 선택한 선택 상자의 다양한 아름다움이 있으며 많이 발견했지만 좋은 스타일 효과는 없습니다. 그래서 나는 Ul Li를 사용하여 만든 선택 상자와 유사한 효과를 발견했습니다. 나는 말도 안되는 말을하지 않을 것입니다. 먼저 그림을 추가하겠습니다. 효과는 다음과 같습니다.
테스트를 클릭하면 목록이 표시됩니다. 다시 클릭하고 목록을 숨기고 LI를 선택한 다음 스팬의 내용을 LI의 내용으로 바꾸면 JS를 사용하여 스팬의 변경 사항을 모니터링 한 다음 코드를 실행할 수 있습니다. 효과는 다음과 같습니다.
HTML 코드는 다음과 같습니다.
<div id = "type"> <fan> 투자 유형 </span> <ul> <li> 선물 </li> <li> 주식 </li> <li> 옵션 </li> </ul> </div> <div id = "Kind"> <span> 투자 유형 </span> <li> 추세 </li> <li> vantility </li> <li> <li> <li>> <li>> <li>> <li>. <li> 타이밍 </li> </ul> </div>
CSS 코드는 다음과 같습니다.
ul li {List-Style : none;}. 테스트 {위치 : 상대; 플로트 : 왼쪽; 너비 : 120px; 높이 : 40px; 왼쪽 패딩 : 11px; 글꼴 크기 : 15px; 라인 높이 : 40px; 커서 : 포인터; 국경 : 1px 고체 #d2d2d2; Border-Radius : 3px; 마진 오른쪽 : 20px; 개요 : 없음;}. 테스트 : {위치 : 절대; 오른쪽 : 13px; 상단 : 18px; 너비 : 0; 높이 : 0; 내용 : Border-Width : 8px 8px 0 8px; 국경 스타일 : 단단한; 국경 색 : #D36969 투명; -webkit-transition : 변환 .25; -Moz-transition : 변환 .25; -ms-transition : 변환 .25; -o-ransition : 변환 .25; -o-ransition : 변환 .25; 전환 : 변환 .25S;}. 테스트 : {위치 : 절대; 오른쪽 : 15px; 상단 : 18px; 너비 : 0; 높이 : 0; 콘텐츠: ""; 국경비 : 6px 6px 0 6px; 국경 스타일 : 단단한; 국경 색 : #fff 투명; -webkit-transition : 모든 .25; -Moz-transition : 모든 .25; -ms-transition : 모든 .25; -O- 전달 : 모든 .25; -O- 전달 : 모든 .25; 전환 : 모든 .25S;}. test.Active : 이전 {-webkit -transform : rotate (180deg); -Moz 변환 : 회전 (180deg); -ms-transform : 회전 (180deg); -o-transform : 회전 (180deg); 변환 : 회전 (180deg); } .test.Active : {TOP : 20px 이후; -webkit-transform : 회전 (180deg); -Moz 변환 : 회전 (180deg); -ms-transform : 회전 (180deg); -o-transform : 회전 (180deg); 변환 : 회전 (180deg); } .Test .DropDown {위치 : 절대; 오른쪽 : 0; 왼쪽 : 0; 디스플레이 : 없음; 패딩 : 0; Border-Radius : 상속; 테두리 : 1px 고체 #d2d2d2; Box-Shadow : 2PX 2PX 5PX RGBA (0,0,0, .4);}. Test.Active .DropDown {display : block;}. Test. DROPDOWN : 전 {위치 : 절대; 오른쪽 : 13px; 하단 : 100%; 너비 : 0; 높이 : 0; 콘텐츠: ""; 국경비 : 0 8px 8px; 국경 스타일 : 단단한; 국경 색 : #d2d2d2 투명;}. 테스트. 드롭 다운 : 후 {위치 : 절대; 오른쪽 : 15px; 하단 : 100%; 너비 : 0; 높이 : 0; 콘텐츠: ""; 국경비 : 0 6px 6px 6px; 국경 스타일 : 단단한; 국경 색 : #ffff 투명;}. 테스트. 드롭 다운 li {float : 왼쪽; 너비 : 129px; 글꼴 크기 : 14px; -webkit-transition : 모든 .3S 편의성; -Moz-transition : 모든 .3S 용이성; -ms-transition : 모든 .3S 편의성; -o-ransition : 모든 .3s 편의성; 전환 : 모든 .3S 편의성; Text-Align : Center;}. 테스트. 드롭 다운 Li : 최초 유형 {Border-Radius : 3PX 3PX 0 0;}. 테스트. 드롭 다운 Li : 마지막 유형 {Border-Radius : 0 3PX 3PX;}. 테스트. 드롭 다운 Li : hover {색상 : #fff; 배경 : #C43C3D;}두 가지 의사 요소의 경우 : 이전 및 후에는 이전 블로그를 확인할 수 있습니다.
JS 코드는 다음과 같습니다.
함수 드롭 다운 (el) {this.dd = el; this.span = this.dd.children ( 'span'); this.li = this.dd.find ( 'ul.dropdown li'); this.val = '';} dropdown.prototype.initevents = function () {var obj = this; obj.dd.on ( 'click', function (event) {$ (this) .toggleClass ( 'active'). Siblings (). RemoveClass ( 'active'); event.stopPropagation ();}); obj.li.on ( 'click', function () {var opt = $ (this); obj.val = opt.html (); if (obj.span.html () == obj.val) return; obj.span.html (obj.val); $ (document) .click (function () {test '). });}} var test1 = new Dropdown ($ ( '#type')); var test2 = new Dropdown ($ ( '#kind')); test1.initevents (); test2.initevents ()여기서, 드롭 다운 객체는 생성자 프로토 타입 조합 모드를 사용하여 생성됩니다. 생성자 프로토 타입 조합 모드가 설명됩니다. 속성은 생성자에 기록되며, 이는 각 인스턴스에 고유 한 속성을 나타내므로 객체가 콘크리트입니다. 이 방법은 생성자 외부에 기록되며, 이는 각 인스턴스에서 공유하는 메소드를 나타냅니다.
그러나 여기서 조금 나쁜 방법은 HTML의 레이아웃이 제한되었다는 것입니다.
훌륭한 주제 공유 : JavaScript 선택 상자 작동 요약 jQuery 선택 상자 작동 요약
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.