Ada berbagai keindahan kotak seleksi terpilih online, dan saya telah menemukan banyak, tetapi tidak ada efek gaya yang baik. Jadi saya menemukan efek yang mirip dengan kotak seleksi pilih yang dibuat menggunakan ul li. Saya tidak akan berbicara omong kosong. Pertama -tama saya akan menambahkan gambar, dan efeknya adalah sebagai berikut:
Klik tes dan daftar akan ditampilkan. Klik lagi, sembunyikan daftar, pilih LI, dan ganti konten dalam rentang dengan konten LI, dan Anda dapat menggunakan JS untuk memantau perubahan dalam rentang dan kemudian menjalankan kode Anda. Efeknya adalah sebagai berikut:
Kode HTML adalah sebagai berikut:
<div id="type"> <span>Investment types</span> <ul> <li>Futures</li> <li>Stocks</li> <li>Options</li> </ul></div><div id="kind"> <span>Investment types</span> <ul> <li>Trends</li> <li>Volatility</li> <li>Arbitrage</li> <li>Stock selection</li> <li> Waktu </li> </ul> </div>
Kode CSS adalah sebagai berikut:
ul li {List-style: none;}. test {position: relatif; float: kiri; Lebar: 120px; Tinggi: 40px; Padding-left: 11px; Ukuran font: 15px; Line-Height: 40px; kursor: pointer; BORDER: 1PX SOLID #D2D2D2; Border-Radius: 3px; margin-kanan: 20px; Garis Besar: Tidak Ada;}. Tes: Sebelum {Posisi: Absolute; Kanan: 13px; Atas: 18px; Lebar: 0; Tinggi: 0; Konten: Batas-lebar: 8px 8px 0 8px; Gaya perbatasan: solid; Border-color: #D36969 Transparan; -webkit-transisi: transformasi .25S; -Moz-transisi: transformasi .25S; -MS-transisi: transformasi .25S; --transisi: transformasi .25S; --transisi: transformasi .25S; Transisi: Transform .25s;}. Test: After {Position: Absolute; Kanan: 15px; Atas: 18px; Lebar: 0; Tinggi: 0; isi: ""; Batas-lebar: 6px 6px 0 6px; Gaya perbatasan: solid; Border-color: #fff transparan; -webkit-transisi: semua .25S; -Moz-transisi: semua .25S; -MS-transisi: semua .25S; --transisi: semua .25S; --transisi: semua .25S; transisi: semua .25S;}. test.active: sebelum {-webkit -transform: rotate (180deg); -Moz-Transform: rotate (180deg); -MS-Transform: Rotate (180deg); -o-transform: rotate (180deg); Transform: Rotate (180deg); } .test.active: After {top: 20px; -webkit-transform: rotate (180deg); -Moz-Transform: rotate (180deg); -MS-Transform: Rotate (180deg); -o-transform: rotate (180deg); Transform: Rotate (180deg); } .test .dropdown {position: absolute; Kanan: 0; Kiri: 0; Tampilan: Tidak Ada; Padding: 0; Border-Radius: warisan; BORDER: 1PX SOLID #D2D2D2; Kotak-Shadow: 2px 2px 5px RGBA (0,0,0, .4);}. Test.active .dropdown {display: block;}. Test .dropdown: sebelum {position: absolute; Kanan: 13px; Bawah: 100%; Lebar: 0; Tinggi: 0; isi: ""; Batas-lebar: 0 8px 8px; Gaya perbatasan: solid; Border-color: #d2d2d2 transparan;}. test .dropdown: setelah {position: absolute; Kanan: 15px; Bawah: 100%; Lebar: 0; Tinggi: 0; isi: ""; Batas-lebar: 0 6px 6px 6px; Gaya perbatasan: solid; Border-color: #ffff transparent;}. Test .dropdown li {float: left; Lebar: 129px; Ukuran font: 14px; -webkit-transisi: semua .3 kemudahan; -Moz-transisi: semua .3 kemudahan; -MS-transisi: semua .3 yang mudah; -O-transisi: semua .3 kemudahan-keluar; Transisi: semua .3 yang mudah; Text-Align: center;}. Test .dropdown li: first-of-type {border-radius: 3px 3px 0 0;}. Test .dropdown li: Last-of-type {border-radius: 0 0 3px 3px;}. Test .dropdown li: hover {color: #fff; Latar belakang: #C43C3D;}Untuk dua elemen semu: Sebelum dan: Setelah itu, Anda dapat memeriksa blog saya sebelumnya.
Kode JS adalah sebagai berikut:
function dropdown (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 ('klik', function (event) {$ (this) .toggleClass ('aktif'). Siblings (). RemoveClass ('Active'); event.stoppropagation ();}); obj.li.on ('klik', function () {var opt = $ (ini); obj.val = opt.html (); if (obj.span.html () == obj.val) pengembalian; obj.span.html (obj.val); $ (dokumen). Fungsi () {) () () () () () () (function '(). })} var test1 = dropdown baru ($ ('#type')); var test2 = dropdown baru ($ ('#weah')); test1.Initevents (); test2.initevents ()Di sini, objek dropdown dibuat menggunakan mode kombinasi konstruktor-prototipe. Mode kombinasi konstruktor-prototipe dijelaskan: atribut ditulis dalam konstruktor, yang mewakili atribut yang unik untuk setiap instance, sehingga objeknya konkret; Metode ini ditulis di luar konstruktor, yaitu untuk mewakili metode yang dibagikan oleh setiap contoh.
Tapi sedikit cara buruk di sini adalah bahwa tata letak HTML telah dibatasi.
Berbagi Topik Luar Biasa: JavaScript Kotak Pilihan Ringkasan Ringkasan JQuery Kotak Pemilihan Ringkasan Operasi Ringkasan
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.