li als wählen Sie den Punkt mit Vanille Javascript

var dropdown = document.querySelectorAll('.dropdown'); 
 
var dropdownArray = Array.prototype.slice.call(dropdown,0); 
 
dropdownArray.forEach(function(el){ 
 
\t var button = el.querySelector('a[data-toggle="dropdown"]'), 
 
\t \t \t menu = el.querySelector('.dropdown-menu'), 
 
\t \t \t arrow = button.querySelector('i.icon-arrow'); 
 

 
\t button.onclick = function(event) { 
 
\t \t if(!menu.hasClass('show')) { 
 
\t \t \t menu.classList.add('show'); 
 
\t \t \t menu.classList.remove('hide'); 
 
\t \t \t arrow.classList.add('open'); 
 
\t \t \t arrow.classList.remove('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t menu.classList.remove('show'); 
 
\t \t \t menu.classList.add('hide'); 
 
\t \t \t arrow.classList.remove('open'); 
 
\t \t \t arrow.classList.add('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t }; 
 
}) 
 

 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
};

.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font-family: 'Pacifico'; 
 
    font-weight: norma; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    line-height: 1.4; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { 
 
    text-decoration: none; 
 
} 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { 
 
    background: #2c89c6; 
 
} 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform: rotate(-180deg); 
 
    -webkit-transform: rotate(-180deg); 
 
    transform: rotate(-180deg); 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition: -o-transform 0.6s; 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    transition: transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition: -o-transform 0.6s; 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    transition: transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { 
 
    content: '\25BC'; 
 
} 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { 
 
    padding: 0; 
 
} 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -moz-transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
    transform-origin: 50% 0%; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition: max-height 1s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    transition: max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}

<div class="container"> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown">Select Item <i class="icon-arrow"></i></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">option 1</a></li> 
 
     <li><a href="#">option 2</a></li> 
 
     <li><a href="#">option 3</a></li> 
 
     <li><a href="#">option 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Tropfen arbeitet nach unten in Ordnung. Aber das Problem ist so, wie ich es anstelle des select-Tags verwenden möchte, also muss ich das Listenfeld minimieren, nachdem ich ein Element ausgewählt habe. Und eine Art, wie ich die Daten als Auswahl Element arbeiten kann.

* Entschuldigung für schlecht Englisch.

Quelle

2016-11-27 Anirban

wäre es schön, wenn man einige Teile des Codes löschen können, so brauchen wir nicht alles zu lesen, weil die meisten dieser Code nicht mit Ihrer Frage –

Ich mag Ihr benutzerdefiniertes Dropdown-Menü, besonders das CSS, das Sie eingefügt haben, um den Expand/Collapse-Aktionen Ihres Menüs eine Animation zu geben. Ich habe eine modifizierte Version Ihres Snippets hinzugefügt, und ich hoffe, Sie finden es hilfreich. Ich werde die Revisionen erklären, die ich in dem gemacht habe, was folgen wird.

Zunächst einmal möchte ich zunächst feststellen, dass ich einige kleinere Anpassungen am HTML-Inhalt vorgenommen habe. Insbesondere habe ich ein <input>-Feld vor dem gesamten Dropdown-Menü-Markup mit einem entsprechenden <label>-Element eingefügt. Dies wurde hinzugefügt, um eine schnelle Art zu veranschaulichen, wie der Wert eines bestimmten Elements aus dem Auswahlmenü erfasst wird. Wenn Sie nun auf eines der Listenelemente des Dropdown-Menüs klicken, wird der Wert dieses Elements in das Feld <input> eingefügt.

Als nächstes werden Sie wahrscheinlich bemerken, dass ich einigen relevanten HTML-Elementen ein paar class oder id Attribute hinzugefügt habe. Dies ist weitgehend eine Frage der Bequemlichkeit und um ihre Auswahl (durch die entsprechenden JavaScript-Selektoren) zu erleichtern. Eine wichtige Ergänzung sind jedoch die Attribute data-, die auf dem ungeordneten Listenelement verwendet werden. Es ist ein etwas allgemeines Muster, das in normalen <select> Formulareingaben zu sehen ist, wo man ein data- Attribut hinzufügt, das den Wert jedes einzelnen Elements enthält (ähnlich dem, was here gezeigt wird). Ich werde das kurz zu einem späteren Zeitpunkt kurz ansprechen. Obwohl scheinbar überflüssig, gibt das Attribut data- (oder alternativ das Attribut value) dem Inhalt innerhalb der öffnenden und schließenden Tags eine einfache Möglichkeit, später auf denselben Wert zu verweisen, ohne auf die Methode innerHTML zurückgreifen zu müssen. Weitere Informationen zu data-attributes finden Sie unter MDN article.

Das erste, was zu beachten ist, dass ich meine var Erklärungen alle an die Spitze des Skripts bewegt. In Ihrem ursprünglichen Schnipsel, haben Sie drei separate Variablendeklarationen/Zuweisungen innerhalb des Körpers einer forEach Schleife:

dropdownArray.forEach(function(el) { 
    var button = el.querySelector('a[data-toggle="dropdown"]'), 
     menu = el.querySelector('.dropdown-menu'), 
     arrow = button.querySelector('i.icon-arrow'); 
    /* Some more code follows... */ 
    });

Dies ist das erste, was ich darauf hinweisen würde, dass auf verbessert werden könnte. Insbesondere ist dies weniger als wünschenswert, da Sie im Wesentlichen den Wert der Variablen button, menu und arrow in jeder Iteration der forEach-Schleife neu zuweisen. Da diese stattdessen als konstante Verweise auf feststehende Elemente des DOM gemeint sind, ist es ratsam, diese aus der Schleife herauszuziehen und sie stattdessen neben Ihren beiden Variablen ganz oben zu gruppieren. Sie werden auch feststellen, dass ich das Schlüsselwort var durch das Schlüsselwort ES6 const ersetzt habe. Während dies nichts direkt ändert, tat ich dies, um zu betonen, dass dies feste (, d. H., const) Referenzen auf Elemente des DOM sind und nicht neu zugewiesen werden können.

Als nächstes werden Sie feststellen, ich eine Funktion schrieb, clickHandler(), die als die Callback-Funktion zu einem Ereignis-Listener verwendet werden, die folgen werden. Es ist zwar vollkommen in Ordnung, diese Funktion inline zu schreiben (, d. H., als anonyme Funktion und Argument für den Ereignis-Listener), aber ich habe mich entschieden, sie aus Gründen der Klarheit in ihren eigenen Platz zu entkoppeln.

Wie Sie ursprünglich getan haben, habe ich auch die preventDefault() Methode verwendet, hier als erste Anweisung im Körper der Funktion.

Wo zuvor 14 Zeilen Code zum Hinzufügen/Entfernen der entsprechenden Klassen auf den menu und arrow Elemente hatte, habe ich nur 4. Es ist ziemlich einfach zu verstehen, wie Sie dies verdichten können. In erster Linie besteht keine explizite Notwendigkeit, diese Aktionen zum Hinzufügen/Entfernen von Klassen in if und/oder else Blöcke zu unterteilen. Stattdessen können Sie einfach die toggle() method auf der classList Eigenschaft der Element API verwenden. Damit dies jedoch korrekt funktioniert, müssen die HTML-Elemente menu und arrow mit den CSS-Klassen versehen werden, die für den Anfangszustand geeignet sind: .hide bzw. .close. Sie sehen dies im HTML-Markup.

Das letzte, was mit dieser Funktion zu tun, ist eine if bedingte hinzufügen zu überprüfen, ob das Ziel der Klick des Benutzers ist in der Tat einer der Drop-down-Menü Auswahlfelder (dh, die <li> s). Dies kann auf verschiedene Arten geschehen, aber vielleicht wird das sauberste mit der contains() method auf der Node API erreicht. Zu diesem Zweck begann ich mit einer let Deklaration (wiederum ES6-Syntax) für targ und ordnete sie dem DOM-Knoten zu, auf den der Benutzer geklickt hatte. (Ich habe eine temporäre Variable erstellt, um diesen Knoten zu halten, so dass wir ihn im folgenden Code nicht wiederholt als evt.target bezeichnen müssen. Dies ist außerdem eine gute Vorgehensweise und bietet Leistungsvorteile, wenn auch nur geringfügige, weil die Die JS-Engine muss nicht wiederholt Nachschlagevorgänge durchführen, sondern kann stattdessen auf einen festen Wert verweisen, der als Variable im Status gehalten wird. Ich habe dann durch if Bedingung, unter Verwendung der oben genannten Methode angegeben. Der bereitgestellte bedingte Ausdruck ergibt die binäre (true oder false) Behauptung, dass targ ist ein Nachkomme Knoten (lesen: Kind-Element) der .dropdown-menu unordered-Liste (nach dem menu Variable angegeben). Wenn true ist, wird der Wert des Elements <input> dem Wert des Attributs data-optValue auf dem angeklickten Element <li> zugewiesen.

let targ = evt.target; 
    if (menu.contains(targ)) { 
    selectionInput.value = targ.dataset.optvalue; 
    }

Im Fall das Ziel nicht ein Nachkommen Knoten von menu ist, steht es begründet sein, dass der Benutzer entweder nicht auf einem Eintrag aus dem Dropdown-Menü klicken hat oder dass es das button Element. HINWEIS: Als Alternative zur Zuordnung der <input> Feldwert als der Wert in dem Attribut benutzerdefinierten data- enthalten ist, könnte man auch wie folgt tun:

if (evt.target !== selectMenu && evt.target !== button) { 
    selectionInput.value = evt.target.innerHTML; 
}

würde ich (zumindest von einem persönlichen Point-of-View) raten Sie davon ab, da dies zu Komplikationen führen kann, wenn Sie beispielsweise mehr HTML-Inhalt hinzufügen, der in den einzelnen Tags des Dropdown-Menüs verschachtelt ist.

Schließlich schließen wir mit dem Hinzufügen eines einfachen Event-Handlers. In diesem Fall habe ich das Click-Ereignis an das selectMenu-Element (, d. H., das oberste Level <ul> -Tag) angehängt, wobei es die zuvor erwähnte clickHandler()-Funktion als Rückruf ausführt.

const selectMenu = document.querySelector('#custom-select'), 
 
     selectionInput = document.querySelector('#input-field'), 
 
     dropdown = document.querySelectorAll('.dropdown'), 
 
     dropdownArray = Array.prototype.slice.call(dropdown,0), 
 
     button = document.querySelector('a[data-toggle="dropdown"]'), 
 
     menu = document.querySelector('.dropdown-menu'), 
 
     arrow = button.querySelector('i.icon-arrow'); 
 

 
// Event callback function: 
 
function clickHandler(evt) { 
 
    evt.preventDefault(); 
 
    menu.classList.toggle('show'); 
 
    menu.classList.toggle('hide'); 
 
    arrow.classList.toggle('open'); 
 
    arrow.classList.toggle('close'); 
 
    
 
    let targ = evt.target; 
 
    if (menu.contains(targ)) { 
 
    selectionInput.value = targ.dataset.optvalue; 
 
    } 
 
} 
 

 
// 'Click' event registration: 
 
selectMenu.addEventListener('click', clickHandler, false); 
 

 

 

 
// Purely your code below: 
 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
};

.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font: normal 40px/1.4 'Pacifico', sans-serif; 
 
    text-align: center; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { text-decoration: none; } 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    box-shadow:   0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform:  rotate(-180deg); 
 
    transform:   rotate(-180deg); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -webkit-transform: rotate(0); 
 
    -moz-transform: rotate(0); 
 
    -ms-transform:  rotate(0); 
 
    transform:   rotate(0); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { content: '\25BC'; } 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { padding: 0; } 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    -moz-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    box-shadow:   0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    -ms-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -webkit-transform: scaleY(1); 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform:  scaleY(1); 
 
    transform:   scaleY(1); 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    animation:   showAnimation 0.5s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition:  max-height 1s ease-in-out; 
 
    transition:   max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}

<div class="container"> 
 
    <label for='input-field'>Selection:&nbsp;</label> 
 
    <input type='text' id='input-field' value='' /> 
 
    <br /><br /> 
 
    
 
    <ul id='custom-select'> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown">Select Item 
 
     <i class="icon-arrow close"></i> 
 
     </a> 
 
     <ul class="dropdown-menu hide"> 
 
     <li><a href="#" data-optValue="Option 1">Option 1</a></li> 
 
     <li><a href="#" data-optValue="Option 2">Option 2</a></li> 
 
     <li><a href="#" data-optValue="Option 3">Option 3</a></li> 
 
     <li><a href="#" data-optValue="Option 4">Option 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Quelle

2016-11-27 14:00:37 IsenrichO

Hallo @IsenrichO zusammenhängt Danke für Details. Es hat mir wirklich geholfen, dann Code zu verstehen. Aber Problem ist "Select Item" Text wird nicht durch ausgewählten Optionstext ersetzt. Gibt es eine Möglichkeit, .dropdown [data-toggle = "dropdown"] Text mit Optionstext zu ersetzen? – Anirban

Ihr Code funktioniert auch nicht für mehrere Auswahlfelder. – Anirban

li als wählen Sie den Punkt mit Vanille Javascript

Antwort

Verwandte Themen