มีความสวยงามต่าง ๆ ของกล่องเลือกที่เลือกออนไลน์และฉันพบมาก แต่ไม่มีผลสไตล์ที่ดี ดังนั้นฉันจึงพบเอฟเฟกต์คล้ายกับกล่องเลือกที่เลือกโดยใช้ UL LI ฉันจะไม่พูดเรื่องไร้สาระ ก่อนอื่นฉันจะเพิ่มรูปภาพและเอฟเฟกต์มีดังนี้:
คลิกที่การทดสอบและรายการจะปรากฏขึ้น คลิกอีกครั้งซ่อนรายการเลือก LI และแทนที่เนื้อหาในช่วงด้วยเนื้อหาของ LI และคุณสามารถใช้ JS เพื่อตรวจสอบการเปลี่ยนแปลงในช่วงและจากนั้นเรียกใช้รหัสของคุณ ผลกระทบมีดังนี้:
รหัส HTML มีดังนี้:
<div id = "type"> <pan> ประเภทการลงทุน </span> <ul> <li> ฟิวเจอร์ส </li> <li> หุ้น </li> <li> ตัวเลือก </li></ul> </div> <div id = "ชนิด"> <pan> ประเภทการลงทุน </pan> <li> เวลา </li></ul> </div>
รหัส CSS มีดังนี้:
ul li {list-style: none;}. ทดสอบ {ตำแหน่ง: ญาติ; ลอย: ซ้าย; ความกว้าง: 120px; ความสูง: 40px; Padding-Left: 11px; ขนาดตัวอักษร: 15px; สายไฟ: 40px; เคอร์เซอร์: ตัวชี้; ชายแดน: 1px Solid #D2D2D2; แนวชายแดน: 3px; มาร์จิ้น-ขวา: 20px; โครงร่าง: ไม่มี;}. ทดสอบ: ก่อน {ตำแหน่ง: สัมบูรณ์; ขวา: 13px; ด้านบน: 18px; ความกว้าง: 0; ความสูง: 0; เนื้อหา: ความกว้างของชายแดน: 8px 8px 0 8px; สไตล์ชายแดน: ของแข็ง; สีชายแดน: #D36969 โปร่งใส; -webkit-transition: แปลง. 25s; -MOZ-TRANSITION: แปลง. 25S; -MS-TRANSITION: แปลง. 25s; -O-Transition: แปลง. 25s; -O-Transition: แปลง. 25s; การเปลี่ยนแปลง: แปลง. 25s;}. การทดสอบ: หลังจาก {ตำแหน่ง: สัมบูรณ์; ขวา: 15px; ด้านบน: 18px; ความกว้าง: 0; ความสูง: 0; เนื้อหา: ""; ความกว้างของชายแดน: 6px 6px 0 6px; สไตล์ชายแดน: ของแข็ง; สีชายแดน: #FFF โปร่งใส; -webkit-transition:. 25s ทั้งหมด; -MOZ-TRANSITION: ทั้งหมด. 25S; -MS-TRANSITION: ทั้งหมด 25s; -O-TRANSITION: ทั้งหมด 25s; -O-TRANSITION: ทั้งหมด 25s; การเปลี่ยนแปลง:. 25s;}. test.active: ก่อน {-webkit -transform: หมุน (180deg); -moz-transform: หมุน (180deg); -ms-transform: หมุน (180deg); -O-transform: หมุน (180DEG); แปลง: หมุน (180deg); } .test.active: หลังจาก {top: 20px; -webkit-transform: หมุน (180deg); -moz-transform: หมุน (180deg); -ms-transform: หมุน (180deg); -O-transform: หมุน (180DEG); แปลง: หมุน (180deg); } .test .dropdown {ตำแหน่ง: สัมบูรณ์; ขวา: 0; ซ้าย: 0; แสดง: ไม่มี; Padding: 0; แนวชายแดน: สืบทอด; ชายแดน: 1px Solid #D2D2D2; Box-shadow: 2px 2px 5px RGBA (0,0,0, .4);}. test.active .DropDown {แสดง: block;}. ทดสอบ. DropDown: ก่อน {ตำแหน่ง: สัมบูรณ์; ขวา: 13px; ด้านล่าง: 100%; ความกว้าง: 0; ความสูง: 0; เนื้อหา: ""; ความกว้างของชายแดน: 0 8px 8px; สไตล์ชายแดน: ของแข็ง; สีชายแดน: #D2D2D2 โปร่งใส;}. ทดสอบ. DropDown: หลังจาก {ตำแหน่ง: สัมบูรณ์; ขวา: 15px; ด้านล่าง: 100%; ความกว้าง: 0; ความสูง: 0; เนื้อหา: ""; ความกว้างของชายแดน: 0 6px 6px 6px; สไตล์ชายแดน: ของแข็ง; เส้นขอบสี: #FFFF โปร่งใส;}. ทดสอบ. DropDown Li {Float: ซ้าย; ความกว้าง: 129px; ขนาดตัวอักษร: 14px; -webkit-transition:. 3S ทั้งหมดง่ายขึ้น; -MOZ-TRANSITION:. 3S ทั้งหมดง่ายขึ้น; -MS-TRANSITION:. 3S ทั้งหมดง่ายขึ้น; -O-Transition:. 3S ทั้งหมดง่ายขึ้น; การเปลี่ยนแปลง:. 3S ทั้งหมดง่ายขึ้น; Text-Align: center;}. ทดสอบ. Dropdown li: First-of-type {Border-Radius: 3px 3px 0 0;}. ทดสอบ. Dropdown li: Last-of-type {Border-Radius: 0 0 3px 3px;}. พื้นหลัง: #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 ('คลิก', ฟังก์ชั่น (เหตุการณ์) {$ (นี่) .togGleclass ('ใช้งาน'). พี่น้อง (). RemoveClass ('active'); ent.stoppropagation ();}); obj.li.on ('คลิก', function () {var opt = $ (this); obj.val = opt.html (); ถ้า (obj.span.html () == obj.val) return; obj.span.html (obj.val); $ (เอกสาร). })} var test1 = dropdown ใหม่ ($ ('#type')); var test2 = dropdown ใหม่ ($ ('#ind')); test1.initevents (); test2.initevents ()ที่นี่วัตถุดรอปดาวน์ถูกสร้างขึ้นโดยใช้โหมดการรวมตัวของคอนสตรัคเตอร์-โปรโตไทป์ มีการอธิบายโหมดการรวมตัวของตัวสร้างโปรเซสเซอร์: แอตทริบิวต์ถูกเขียนในคอนสตรัคเตอร์ซึ่งแสดงถึงแอตทริบิวต์ที่ไม่ซ้ำกันในแต่ละอินสแตนซ์เพื่อให้วัตถุเป็นคอนกรีต วิธีการเขียนนอกคอนสตรัคเตอร์ซึ่งเป็นตัวแทนของวิธีการที่ใช้ร่วมกันโดยแต่ละอินสแตนซ์
แต่วิธีที่ไม่ดีเล็กน้อยที่นี่คือรูปแบบของ HTML ถูก จำกัด
การแบ่งปันหัวข้อที่ยอดเยี่ยม: JavaScript Selection Box Operation Summary JQuery Selection Box การดำเนินการสรุปการดำเนินการ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น