li作为选择项使用vanilla Javascript

时间：2016-11-27 12:41:11

标签： javascript css 

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

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

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>

下拉工作正常。但问题是因为我想使用它而不是选择标记，所以我需要在选择项目后最小化列表字段。并且我可以将数据作为选择项运行。

*抱歉英语不好。

1 个答案:

答案 0 :(得分：0)

我非常喜欢您的自定义下拉菜单，尤其是您提供的CSS，可以为菜单的展开/折叠动作添加动画效果。我已经包含了您的代码段的修改版本，我希望您会发现它有所帮助。我将解释我在接下来要做的修改。

首先，让我首先指出我对HTML内容进行了一些小的调整。特别是，我在整个下拉菜单标记之前添加了<input>字段，并带有相应的<label>元素。已添加此项以提供快速说明如何从选择菜单中捕获特定项目的值的方式。现在，当您点击其中一个下拉菜单的列表项时，该项的值将插入到所述<input>字段中。

接下来，您可能会注意到我已经为一些相关的HTML元素添加了一些class或id属性。这在很大程度上是为了方便，并使他们的选择（通过适当的JavaScript选择器）更容易。但是，一个重要的补充是data-无序列表元素上使用的.dropdown-menu属性。这是在普通<select>表单输入中看到的一种常见模式，其中一个添加data-属性，其中包含每个<option>元素的值（类似于显示的here） 。我稍后将简要地解释这一点。虽然看似多余，但为开始和结束标记内的内容提​​供一些data-属性（或者，修复value属性）提供了一种简单的方法，可以在以后引用相同的值而无需求助于innerHTML方法。有关data-attributes的更多信息，请参阅此MDN article。

首先要注意的是，我将所有var声明移到了脚本的最顶层。在原始代码段中，您在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... */
  });

这是我首先指出可以改进的第一件事。具体而言，这不太理想，因为您基本上在button循环的每次迭代中重新分配menu，arrow和forEach变量的值。因为这些是对DOM的固定元素的持续引用，所以建议将它们拉出循环，并且，通过扩展，只需将它们与最顶层的两个变量一起分组。您还会注意到我已将var关键字替换为ES6 const关键字。虽然这并没有彻底改变任何东西，但我这样做是为了强调这些是固定的（即。，const ant）对DOM元素的引用，可能不会被重新分配。

接下来，您会注意到我写了一个函数clickHandler()，该函数将用作后续事件监听器的回调函数。虽然将内联函数（即，作为事件监听器的匿名函数和参数）编写为完全正常，但为了清楚起见，我选择将其解耦到自己的空间中。

正如您最初所做的那样，我也使用了preventDefault()方法，这是作为函数体中的第一个语句。

如果您之前有14行代码可以在menu和arrow元素上添加/删除相应的类，那么我只有4个。了解如何压缩它非常简单。首先，没有明确需要将这些类添加/删除操作分配到if和/或else块中。相反，您只需使用toggle() method的classList属性上的Element API即可。但是，要使其正常运行，必须使用适合初始状态的CSS类对menu和arrow HTML元素进行播种：.hide和.close 。您会在HTML标记中看到这一点。

使用此功能要做的最后一件事是添加一个if条件，以检查用户点击的目标实际上是否是下拉菜单中的一个＆＃39;选择框（即，<li> s）。这可以通过各种方式完成，但最简洁的方法可能是使用Node API上的contains() method。为此，我首先为let发出targ声明（再次，ES6语法）并将其分配给用户单击的DOM节点。 （我创建了一个临时变量来保存这个节点，这样我们就不必在后面的代码中反复将其称为evt.target;此外，这是一个很好的做法，如果是性能优势，如果只有次要的，因为JS引擎不必重复执行查找，而是可以将状态中保存的固定值称为变量。然后我按if条件指定，使用前面提到的contains()方法。提供的条件表达式评估true是false是targ的后代节点（读取：子元素）的二进制（.dropdown-menu或menu）断言} unordered-list（由true变量给出）。如果是<input>，则data-optValue元素的值将被指定为所点击的<li>元素上 let targ = evt.target; if (menu.contains(targ)) { selectionInput.value = targ.dataset.optvalue; } 属性的值。

menu

如果目标不是button的后代节点，则可以理解用户未点击下拉菜单的条目或者<input>元件。注意：作为将data-字段的值指定为自定义if (evt.target !== selectMenu && evt.target !== button) { selectionInput.value = evt.target.innerHTML; } 属性中包含的值的替代方法，还可以执行以下操作：

<li>

我愿意（至少从个人观点来看）不鼓励这样做，因为如果您将某些事情复杂化，例如，添加更多嵌套在drop的各个selectMenu标签内的HTML内容 - 下来菜单。

最后，我们最后添加一个简单的事件处理程序。在这种情况下，我已将点击事件附加到<ul元素（即，顶级clickHandler()＆gt;标记），并将其传递给前面提到的{{ 1}}作为回调函数。

＆＃13;
＆＃13; 
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);
};
＆＃13; 
.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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题