Existem várias belezas da caixa de seleção selecionadas on -line, e eu encontrei muito, mas não há um bom efeito de estilo. Então, encontrei um efeito semelhante à caixa de seleção de seleção feita usando Ul Li. Eu não vou falar bobagem. Primeiro, adicionarei a imagem, e o efeito é o seguinte:
Clique em um teste e a lista será exibida. Clique novamente, oculte a lista, selecione um LI e substitua o conteúdo no período pelo conteúdo de LI e você pode usar o JS para monitorar as alterações no período e executar seu código. Os efeitos são os seguintes:
O código HTML é o seguinte:
<Div id = "TIPO"> <BPO> Tipos de investimento </span> <ul> <li> Futuros </li> <li> Estoques </li> <li> Opções </li> </ul> </div> <div id = "Kind" <liM> Tipos de investimento </span> <ul> <li> Trends </li> <li> <liTility </Li> <li> <li> <li> Tempo </li> </ul> </div>
O código CSS é o seguinte:
ul li {estilo de lista: nenhum;}. Teste {Position: relativo; flutuar: esquerda; Largura: 120px; Altura: 40px; preenchimento-esquerda: 11px; Size da fonte: 15px; altura da linha: 40px; Cursor: Ponteiro; borda: 1px sólido #d2d2d2; Radio de fronteira: 3px; Margem-direita: 20px; Esboço: Nenhum;}. Teste: Antes {Posição: Absoluto; Direita: 13px; Top: 18px; largura: 0; altura: 0; Conteúdo: largura de borda: 8px 8px 0 8px; estilo de fronteira: sólido; cor de borda: #d36969 transparente; -Webkit-transição: transform .25s; -moz-transição: transform .25s; -ms-transição: transform .25s; -O-transição: transformar .25s; -O-transição: transformar .25s; Transição: transform .25s;}. Teste: após {posição: absoluto; Direita: 15px; Top: 18px; largura: 0; altura: 0; contente: ""; largura de borda: 6px 6px 0 6px; estilo de fronteira: sólido; Border-Color: #FFF transparente; -Webkit-transição: todos .25s; -moz-transição: todos .25s; -ms-transição: todos .25s; -O-transição: todos .25s; -O-transição: todos .25s; transição: todos .25s;}. test.active: antes {-webkit -transform: girt (180deg); -moz-transform: girate (180deg); -ms-transform: girate (180deg); -o-transform: girate (180deg); Transformar: girar (180deg); } .test.active: após {top: 20px; -webkit-transform: girate (180deg); -moz-transform: girate (180deg); -ms-transform: girate (180deg); -o-transform: girate (180deg); Transformar: girar (180deg); } .Test .Dropdown {Posição: Absolute; Direita: 0; Esquerda: 0; Exibir: Nenhum; preenchimento: 0; Radio de fronteira: herdar; borda: 1px sólido #d2d2d2; Box-Shadow: 2px 2px 5px RGBA (0,0,0, .4);}. Test.Active .Dropdown {Display: Block;}. Test .Dropdown: antes de {posição: Absolute; Direita: 13px; Inferior: 100%; largura: 0; altura: 0; contente: ""; largura de borda: 0 8px 8px; estilo de fronteira: sólido; Border-cor: #d2d2d2 transparent;}. teste .Dropdown: após {posição: absoluto; Direita: 15px; Inferior: 100%; largura: 0; altura: 0; contente: ""; largura de borda: 0 6px 6px 6px; estilo de fronteira: sólido; cor de borda: #ffff transparente;}. teste .Dropdown li {float: esquerda; Largura: 129px; Size da fonte: 14px; -Webkit-transição: todos .3s facilidade; -moz-transição: todos .3s facilitar; -ms-transição: todos .3s facilidade; -O-transição: todos .3s facilidade; Transição: todos .3s facilitar; Text-align: Center;}. Test .Dropdown Li: Primeiro do tipo {Radio de fronteira: 3px 3px 0 0;}. Test .Dropdown Li: Last-of-Type {Border-Radius: 0 0 3px 3px;}. Test .Dropdown Li: hover {color: #fff; Antecedentes: #C43C3D;}Para os dois pseudo-elementos: antes e: depois, você pode conferir meu blog anterior.
O código JS é o seguinte:
função suspenso (el) {this.dd = el; this.span = this.dd.children ('span'); this.li = this.dd.find ('ul.dropdown li'); this.val = '';} suspenso.prototype.initevents = function () {var obj = this; obj.dd.on ('clique', function (event) {$ (this) .toggleClass ('Active'). irmãos (). removeclass ('ativo'); event.stoppropagation ();}); obj.li.on ('clique', function () {var opt = $ (this); obj.val = opt.html (); if (obj.span.html () == obj.val) return; obj.span.html (obj.val); })} var test1 = novo suspenso ($ ('#tipo')); var test2 = novo suspenso ($ ('#tipo')); test1.initevents (); test2.initevents ()Aqui, um objeto suspenso é criado usando o modo de combinação do construtor-protótipo. O modo de combinação do construtor-protótipo é explicado: o atributo é escrito no construtor, que representa os atributos exclusivos para cada instância, para que o objeto seja concreto; O método é escrito fora do construtor, que deve representar o método compartilhado por cada instância.
Mas uma maneira ruim aqui é que o layout do HTML foi restrito.
Compartilhamento maravilhoso de tópicos: Javascript Seleção Box Operação Resumo da Operação da Operação da Caixa de Seleção JQuery Resumo
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.