Gaya pilihan default sering jelek. Untuk memastikan gaya seragam halaman, pilih perlu dipercantik. Meskipun ada banyak plug-in yang dipercantik, mencari banyak, itu benar-benar sakit kepala untuk memperkenalkan file CSS panjang dan file JS. Bahkan, prinsip implementasi Select sangat sederhana, ini adalah proses mengklik untuk beralih tampilan, menyembunyikan dan melewati nilai. Saya mensimulasikannya dengan jQuery, dan menulis gaya apa pun yang Anda inginkan, tanpa membatasi nomornya.
Efek Sederhana:
html:
<div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div> <div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3 </li></ul> </div>
CSS:
ul {margin: 0; Padding: 0; List-style: none;}. Select_box {width: 200px; Tinggi: 36px; Perbatasan: 1px solid #3CF; Posisi: kerabat; float: kiri; margin-kanan: 50px;}. Select_box span {display: inline-block; Lebar: 200px; Tinggi: 36px; kurvesor: pointer; Text-Indent: 10px;}. Select_box .span_aa {color:#c36;}. Select_box ul {width: 200px; Posisi: Absolute; Atas: 36px; Kiri: -1px; Perbatasan: 1px solid #3CF; Tampilan: Tidak Ada; latar belakang: #fff;}. Select_box li {kursor: pointer; Line-Height: 36px; Text-Indent: 10px;}. Select_box Li: Hover {latar belakang:#39f; warna: #fff;}. Select_box font {position: absolute; Kanan: 10px; Ukuran font: 26px; Font-Family: "Microsoft Yahei"; Warna:#3CF; Transform: rotate (90deg);}JS:
$ (function () {var s_title = $ (". Select_box span"); var s_select = $ (". Select_box li"); s_title.click (function (e) {$ (this) .addclass ("span_aa"); $ (this) .next ("ul"). s_select.click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ('ul'). prev ("span"); s_title_2) (s_text) .removeclass ("span_a"; $ (dokumen) .click (function () {s_title.removeclass ("span_aa"); $ (". Select_box ul"). Hide ();});Download Kode Sumber: JS SELECT BOX DOWNIFIKASI KETETERIAN KETECATAN
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik ringkasan efek kotak drop-down jQuery dan ringkasan efek kotak drop-down JavaScript untuk dipelajari.
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.