Hay varias bellezas del cuadro selecto de selección en línea, y he encontrado mucho, pero no hay un buen efecto de estilo. Así que encontré un efecto similar al cuadro de selección Seleccionar usando UL Li. No hablaré tonterías. Primero agregaré la imagen, y el efecto es el siguiente:
Haga clic en una prueba y se mostrará la lista. Haga clic nuevamente, oculte la lista, seleccione un LI y reemplace el contenido en el tramo con el contenido de Li, y puede usar JS para monitorear los cambios en el tramo y luego ejecutar su código. Los efectos son los siguientes:
El código HTML es el siguiente:
<div id = "tipo"> <span> tipos de inversión </span> <ul> <li> futuros </li> <li> stocks </li> <li> opciones </li> </ul> </div> <divi Id = "kind"> <span> tipos de inversión </span> <ul> <li> tendencias </li> <li> volatilidad </li> <li> arbitrage </li> <li> Tiempo </li> </ul> </div>
El código CSS es el siguiente:
ul li {list-style: none;}. Test {Position: relativo; flotante: izquierda; Ancho: 120px; Altura: 40px; RODING-LEFT: 11px; tamaño de fuente: 15px; Línea de altura: 40px; cursor: puntero; borde: 1px sólido #d2d2d2; Border-Radius: 3px; margen-derecha: 20px; Esquema: Ninguno;}. Test: antes {posición: Absolute; Derecha: 13px; Arriba: 18px; Ancho: 0; Altura: 0; contenido: ancho de borde: 8px 8px 0 8px; estilo fronterizo: sólido; Color de la frontera: #D36969 Transparente; -WebKit-Transition: transformar .25s; -Moz-Transition: transformar .25s; -Ms-Transition: transformar .25s; -o-transición: transformar .25s; -o-transición: transformar .25s; transición: transformar .25s;}. Test: After {Position: Absolute; Derecha: 15px; Arriba: 18px; Ancho: 0; Altura: 0; contenido: ""; ancho de borde: 6px 6px 0 6px; estilo fronterizo: sólido; border-color: #fff transparente; -WebKit-Transition: todos .25s; -Moz-Transition: todos .25s; -Ms-Transition: todos .25s; -O-transición: todos .25s; -O-transición: todos .25s; Transición: todos .25s;}. test.active: antes {-webkit -transform: rotate (180deg); -Moz-Transform: Rotate (180deg); -ms-transform: rotar (180deg); -o-transform: rotar (180deg); transformación: rotar (180 grados); } .test.active: después {top: 20px; -Webkit-transform: rotar (180deg); -Moz-Transform: Rotate (180deg); -ms-transform: rotar (180deg); -o-transform: rotar (180deg); transformación: rotar (180 grados); } .test .dropdown {posición: absoluto; Derecha: 0; Izquierda: 0; Pantalla: ninguno; relleno: 0; Border-Radius: heredar; borde: 1px sólido #d2d2d2; Box Shadow: 2px 2px 5px rgba (0,0,0, .4);}. test.active .dropdown {display: block;}. test .dropdown: antes {posición: absoluto; Derecha: 13px; Abajo: 100%; Ancho: 0; Altura: 0; contenido: ""; ancho de borde: 0 8px 8px; estilo fronterizo: sólido; border-color: #d2d2d2 transparent;}. test .dropdown: después de {posición: absoluto; Derecha: 15px; Abajo: 100%; Ancho: 0; Altura: 0; contenido: ""; ancho de borde: 0 6px 6px 6px; estilo fronterizo: sólido; border-color: #ffff transparent;}. test .dropdown li {float: izquierda; Ancho: 129px; tamaño de fuente: 14px; -WebKit-Transition: todos los .3 aliviados; -Moz-Transition: todos los .3 aliviados; -Ms-Transition: todos los .3 aliviados; -O-transición: todos los .3 aliviares; Transición: todos los .3 aliviados; Text-Align: Center;}. Test .dropdown Li: Primero de tipo {border-radio: 3px 3px 0 0;}. test .dropdown li: último de tipo {border-radio: 0 0 3px 3px;}. test .dropdown li: hover {color: #fff; Antecedentes: #C43C3D;}Para los dos pseudo-elementos: antes y: después, puede consultar mi blog anterior.
El código JS es el siguiente:
función desplegable (el) {this.dd = el; this.span = this.dd.children ('span'); this.li = this.dd.find ('ul.dropdown li'); this.val = '';} desplazamiento.prototype.initevents = function () {var obj = this; obj.dd.on ('click', function (event) {$ (this) .toggleclass ('activo'). 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); $ (documento) .Click (function () {$ ($ ('. Test'). });})} var test1 = nuevo desplegable ($ ('#type')); var test2 = new Dropdown ($ ('#kind'));Aquí, se crea un objeto desplegable utilizando el modo de combinación Constructor-Prototype. Se explica el modo de combinación del constructor-prototipo: el atributo está escrito en el constructor, que representa los atributos únicos para cada instancia, de modo que el objeto es concreto; El método está escrito fuera del constructor, que es representar el método compartido por cada instancia.
Pero un poco de mala manera aquí es que el diseño del HTML ha sido restringido.
Maravilloso intercambio de temas: JavaScript Selection Box Operation Resumen JQuery Selection Box Operation Resumen
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.