JS réalise l'effet et l'embellissement de la boîte de sélection sélectionnée

Il existe diverses embellis de la boîte de sélection sélectionnée en ligne, et j'ai trouvé beaucoup, mais il n'y a pas d'effet de style bon. J'ai donc trouvé un effet similaire à la boîte de sélection de sélection fabriquée à l'aide de UL Li. Je ne parlerai pas de bêtises. J'ajouterai d'abord l'image, et l'effet est le suivant:

Cliquez sur un test et la liste sera affichée. Cliquez à nouveau, masquez la liste, sélectionnez un Li et remplacez le contenu dans la travée par le contenu de Li, et vous pouvez utiliser JS pour surveiller les modifications de la durée, puis exécuter votre code. Les effets sont les suivants:

Le code HTML est le suivant:

 <div id = "type"> <span> Types d'investissement </span> <ul> <li> Futures </li> <li> Stocks </li> <li> Options </li> </ul> </div> <div id = "kind"> <span> Types d'investissement </span> <ul> <li> Tendances </li> <li> Volatilité </li> <li> Arbitrage </ li> <li> timing </li> </ul> </div>

Le code CSS est le suivant:

 ul li {list-style: aucun;}. test {position: relative; flottant: à gauche; Largeur: 120px; hauteur: 40px; padding-gauche: 11px; taille de police: 15px; hauteur de ligne: 40px; curseur: pointeur; Border: 1px solide # d2d2d2; Border-Radius: 3px; marge-droite: 20px; Aperçu: aucun;}. Tester: avant {position: absolue; À droite: 13px; En haut: 18px; Largeur: 0; hauteur: 0; Contenu: largeur de bordure: 8px 8px 0 8px; Style de la frontière: solide; Color à la frontière: # D36969 transparent; -Webkit-Transition: Transformer .25S; -Moz-Transition: Transformer .25S; -ms-transition: transform .25S; -o-transition: transform .25S; -o-transition: transform .25S; Transition: transform .25S;}. Test: après {position: absolue; À droite: 15px; En haut: 18px; Largeur: 0; hauteur: 0; contenu: ""; largeur de bordure: 6px 6px 0 6px; Style de la frontière: solide; Border-Color: #FFF Transparent; -Webkit-Transition: Tous .25S; -Moz-Transition: Tous .25S; -ms-transition: tous .25S; -o-transition: tous .25S; -o-transition: tous .25S; transition: tous .25s;}. test.active: avant {-webkit-transform: rotation (180Deg); -Moz-transform: Rotation (180deg); -ms-transform: Rotate (180deg); -o-transform: Rotate (180deg); transformée: rotation (180deg); } .test.active: après {top: 20px; -Webkit-Transform: Rotate (180deg); -Moz-transform: Rotation (180deg); -ms-transform: Rotate (180deg); -o-transform: Rotate (180deg); transformée: rotation (180deg); } .test .Dropdown {position: absolue; à droite: 0; à gauche: 0; Affichage: aucun; rembourrage: 0; Border-Radius: Héritage; Border: 1px solide # d2d2d2; Box-Shadow: 2px 2px 5px rgba (0,0,0, .4);}. test.active .Dropdown {affiche: bloc;}. Test .Dropdown: avant {position: absolue; À droite: 13px; En bas: 100%; Largeur: 0; hauteur: 0; contenu: ""; largeur de bordure: 0 8px 8px; Style de la frontière: solide; Border-Color: # d2d2d2 transparent;}. Test .Dropdown: After {position: Absolute; À droite: 15px; En bas: 100%; Largeur: 0; hauteur: 0; contenu: ""; largeur de bordure: 0 6px 6px 6px; Style de la frontière: solide; Border-Color: #ffff transparent;}. Test .Dropdown Li {float: Left; Largeur: 129px; taille de police: 14px; -Webkit-Transition: Tous les .3s facilités; -Moz-Transition: Tous les .3s facilités; -ms-transition: tous les .3s facilités; -o-transition: tous les .3s facilités; Transition: Tous les .3s facilités; Text-Align: Center;}. Test .Dropdown Li: Premier-de-Type {Border-Radius: 3px 3px 0 0;}. Test .Dropdown Li: Last-of-Type {Border-Radius: 0 0 3px 3px;}. Test .Dropdown Li: hover {couleur: #fff; Contexte: # C43C3D;}

Pour les deux pseudo-éléments: avant et: après, vous pouvez consulter mon blog précédent.

Le code JS est le suivant:

 Fonction 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 ('cliquez', fonction (événement) {$ (this) .toggleclass ('active'). silets (). reposerclass ('active'); event.stoppropagation ();}); obj.li.on ('click', function () {var opt = $ (this); obj.val = opt.html (); if (obj.span.html () == obj.val); obj.span.html (obj.val); $ (document) .click (function () {$ ('. });})} var test1 = new dropdown ($ ('# type')); var test2 = new dropdow

Ici, un objet déroulant est créé à l'aide du mode de combinaison constructeur-prototype. Le mode de combinaison constructeur-prototype est expliqué: l'attribut est écrit dans le constructeur, qui représente les attributs uniques à chaque instance, de sorte que l'objet est concret; La méthode est écrite en dehors du constructeur, qui doit représenter la méthode partagée par chaque instance.

Mais un peu de mauvaise façon ici est que la disposition du HTML a été restreinte.

Magnifique partage de sujet: JavaScript Sélection Boîte Opération Résumé de la boîte de sélection jquery

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.