李作为选择项目使用香草的Javascript

Question

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>

下拉显示效果还算不错。但问题是因为我想使用它而不是选择标签，所以我需要在选择一个项目后最小化列表字段。而且我可以将数据作为选择项目工作。

*对不起英语不好。

Answer 1

我真的很喜欢你的自定义下拉菜单，特别是你包含的CSS来给菜单的展开/折叠动作提供一些动画。我已经包含了你的代码片段的修改版本，我希望你会发现它有帮助。我将解释我在随后的修改中所做的修改。

首先，让我开始注意到我对HTML内容进行了一些小调整。特别是，我在整个下拉菜单标记之前包含了一个<input>字段，其​​中包含相应的<label>元素。已添加此信息可快速说明如何从选择菜单中捕捉特定项目的值。现在，当您点击其中一个下拉菜单的列表项目时，该项目的值将被插入到<input>字段中。

接下来，您可能会注意到我已将几个class或id属性添加到某些相关的HTML元素。这在很大程度上是为了方便起见，并且通过适当的JavaScript选择器来简化它们的选择。但是，一个重要的补充是在.dropdown-menu无序列表元素上使用的data-属性。这是在正常的<select>表单输入中看到的某种常见模式，其中一个添加了包含每个单元<option>元素的值的data-属性（类似于所示的here）。我将在稍后简短地简述这一点。尽管看起来多余，但为开始和结束标记中的内容赋予一些data-属性（或者替代地固定value属性）提供了稍后引用相同值的简单方法，而不必诉诸于innerHTML方法。有关data-attributes的更多信息，请参见MDN article。

---

首先要注意的事情是，我提出我的所有var声明到脚本的最顶端。在原来的片段，你有三个独立的变量声明/ A forEach循环体中分配：

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... */ 
    }); 

这是我要指出的第一件事是可以改进的。具体而言，这并不令人满意，因为您实质上是在forEach循环的每次迭代中重新指定button,menu和arrow变量的值。因为这些是固定引用DOM的固定元素，所以建议将这些引出到循环之外，并且最好将它们与最上面的两个变量一起分组。您还会注意到，我已将var关键字替换为ES6 const关键字。尽管这不会直接改变任何事情，但我强调这些是固定的（，即，const ant）对DOM元素的引用，并且可能不会被重新分配。

---

接下来，你会发现我写了一个函数，clickHandler()，将被用作回调函数的事件侦听器也会随之而来。尽管直接编写这个函数（，即，作为事件监听器的匿名函数和参数）是完全正确的，但为了清晰起见，我已选择将其解耦为自己的空间。正如你原来所做的那样，我也使用了preventDefault()方法，在这里做为函数体中的第一条语句。

如果您之前有14行代码在menu和arrow元素上添加/删除相应的类，我只有4个。理解这个过程很简单。首先，最重要的是，没有明确的需要将这些类别添加/删除操作分配到if和/或else区块。相反，您只需使用Element API的classList属性上的toggle() method即可。但是，为了使其正确运行，需要将HTML元素与适合初始状态的CSS类别分别设为.hide和.close。您会看到这反映在HTML标记中。

要使用此功能做的最后一件事是增加一个if条件检查，如果用户点击的目标是，在事实上，下拉菜单的选择框（即之一，<li>小号）。这可以通过各种方式完成，但最简单的方法是使用Node API上的contains() method。为此，我开始为targ做一个let声明（再一次，ES6语法），并将它分配给用户点击的DOM节点。 （我做了一个临时变量来保存这个节点，这样我们就不必在下面的代码中多次提到它作为evt.target;而且这是一个很好的实践，并赋予了性能优势，如果只是次要的，因为JS引擎不必重复执行查找，而是可以将状态中的固定值引用为变量）。然后我用if的条件来指定，这里用前面提到的的方法。所提供的条件表达式的值的二值（true或false）断言targ是后代节点：所述.dropdown-menu无序列表（由menu变量给出）的（读子元素）。如果是true，则<input>元素的值将被指定为单击的<li>元素上的data-optValue属性的值。

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

在目标不是menu后继节点的情况下，它代表要的理由是，用户要么没有单击下拉菜单中的一个条目，或者它是button元素。注：作为替代分配载自定义data-属性的值<input>字段的值，一个也做如下图所示：

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

我会（至少从个人角度的视图） ，请不要这样做，因为例如，如果您添加嵌套在下拉菜单的各个<li>标签中的更多HTML内容，它可能会使事情变得复杂。

---

最后，我们总结添加一个简单的事件处理程序。在这种情况下，我已将点击事件附加到selectMenu元素（，即，顶级<ul>标记），并将上述clickHandler()函数作为回调函数传递给它。

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>