Javascript 用于多字段的自定义选择框

var dropdown=document.querySelectorAll（'.dropdown'）；
var dropdownArray=Array.prototype.slice.call（下拉，0）；
dropdownArray.forEach（函数（el）{
var button=el.querySelector（'a[data toggle=“dropdown”]”），
menu=el.querySelector（“.下拉菜单”），
arrow=button.querySelector（'i.icon-arrow'）；
button.onclick=函数（事件）{
如果（！menu.hasClass（'show'））{
menu.classList.add（'show'）；
menu.classList.remove（'hide'）；
arrow.classList.add（'open'）；
arrow.classList.remove（'close'）；
event.preventDefault（）；
}
否则{
menu.classList.remove（'show'）；
menu.classList.add（'hide'）；
arrow.classList.remove（'open'）；
arrow.classList.add（'close'）；
event.preventDefault（）；
}
};
})
Element.prototype.hasClass=函数（类名）{
返回this.className&&new RegExp（“（^ |\\s）”+className+“（\\s |$）”））.test（this.className）；
};
。文本中心{
文本对齐：居中；
}
*,
*：之前，
*：之后{
-webkit边框大小：边框框；
-moz边框大小：边框框；
边框大小：边框框；
}
.集装箱{
宽度：350px；
保证金：50px自动；
浮动：左；
右边距：30px；
}
.container>ul{
列表样式：无；
填充：0；
利润率：0.20px0；
}
.头衔{
字体：普通40px/1.4“Pacifico”，无衬线；
文本对齐：居中；
颜色：#2980B9；
}
.下拉列表a{文本装饰：无；}
.dropdown[数据切换=“dropdown”]{
位置：相对位置；
显示：块；
颜色：白色；
背景#2980B9；
-网络工具包盒阴影：0 1px 0#409ad5插图，
0-1px0#20638f插图；
-moz盒阴影：0 1px 0#409ad5插图，
0-1px0#20638f插图；
盒影：0 1px 0#409ad5插图，
0-1px0#20638f插图；
文本阴影：0-1px0RGBA（0,0,0,0.3）；
填充：10px；
}
.dropdown[data toggle=“dropdown”]：悬停{background:#2c89c6；}
.下拉菜单.图标箭头{
位置：绝对位置；
显示：块；
字体大小：0.7em；
颜色：#fff；
顶部：14px；
右：10px；
}
.下拉列表.图标箭头.打开{
-webkit变换：旋转（-180度）；
-moz变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
-webkit转换：-webkit转换0.6s；
-moz变换：-moz变换0.6s；
-o-转变：-o-转变0.6s；
转变：转变0.6s；
}
.下拉菜单.图标箭头.关闭{
-webkit变换：旋转（0）；
-moz变换：旋转（0）；
-ms变换：旋转（0）；
变换：旋转（0）；
-webkit转换：-webkit转换0.6s；
-moz变换：-moz变换0.6s；
-o-转变：-o-转变0.6s；
转变：转变0.6s；
}
.dropdown.icon箭头：在{content:'\25BC'；}之前
.下拉菜单.下拉菜单{
最大高度：0；
溢出：隐藏；
列表样式：无；
填充：0；
保证金：0；
}
.dropdown.dropdown菜单li{填充：0；}
.下拉菜单.下拉菜单a{
显示：块；
颜色：#6f6f6f；
背景：#EEE；
-webkit盒阴影：0 1px 0白色插图，
0-1px0#d5d5d5插图；
-moz盒阴影：0 1px 0白色插图，
0-1px0#d5d5d5插图；
长方体阴影：0 1px 0白色插图，
0-1px0#d5d5d5插图；
文本阴影：0-1px0RGBA（255,255,255,0.3）；
填充：10px 10px；
}
.下拉菜单.下拉菜单a:悬停{
背景：#f6f6f6；
}
.下拉列表.显示，
.下拉.隐藏{
-webkit转换来源：50%0；
-moz变换原点：50%0；
-ms变换原点：50%0；
变换原点：50%0；
}
.下拉列表.显示{
显示：块；
最大高度：9999px；
-webkit转换：scaleY（1）；
-moz变换：scaleY（1）；
-ms变换：scaleY（1）；
变换：scaleY（1）；
-webkit动画：showAnimation 0.5s轻松输入输出；
-moz动画：showAnimation 0.5s轻松输入输出；
动画：showAnimation 0.5s缓进缓出；
-webkit过渡：最大高度1s，易于进出；
-moz过渡：最大高度1s，易于输入输出；
-o型过渡：最大高度1s，易于进出；
过渡：最大高度1s，易于进出；
}
.下拉.隐藏{
最大高度：0；
-moz变换：scaleY（0）；
-ms变换：scaleY（0）；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
动画：隐藏0.4s缓解；
-moz动画：隐藏0.4s缓解；
-webkit动画：隐藏动画0.4s缓解；
-moz过渡：最大高度0.6s放松；
-o型过渡：最大高度0.6s缓解；
-webkit过渡：最大高度0.6s放松；
过渡段：最大高度0.6s放松；
}
@关键帧显示动画{
0% {
-moz变换：scaleY（0.1）；
-ms变换：scaleY（0.1）；
-webkit转换：scaleY（0.1）；
变换：scaleY（0.1）；
}
40% {
-moz变换：scaleY（1.04）；
-ms-transform:scaleY（1.04）；
-webkit转换：scaleY（1.04）；
转换：scaleY（1.04）；
}
60% {
-moz变换：scaleY（0.98）；
-ms变换：scaleY（0.98）；
-webkit转换：scaleY（0.98）；
变换：scaleY（0.98）；
}
80% {
-moz变换：scaleY（1.04）；
-ms-transform:scaleY（1.04）；
-webkit转换：scaleY（1.04）；
转换：scaleY（1.04）；
}
100% {
-moz变换：scaleY（0.98）；
-ms变换：scaleY（0.98）；
-webkit转换：scaleY（0.98）；
变换：scaleY（0.98）；
}
80% {
-moz变换：scaleY（1.02）；
-ms-transform:scaleY（1.02）；
-webkit转换：scaleY（1.02）；
转换：scaleY（1.02）；
}
100% {
-moz变换：scaleY（1）；
-ms变换：scaleY（1）；
-webkit转换：scaleY（1）；
变换：scaleY（1）；
}
}
@-moz关键帧显示动画{
0% {
-moz变换：scaleY（0.1）；
-ms变换：scaleY（0.1）；
-webkit转换：scaleY（0.1）；
变换：scaleY（0.1）；
}
40% {
-moz变换：scaleY（1.04）；
-ms-transform:scaleY（1.04）；
-webkit转换：scaleY（1.04）；
转换：scaleY（1.04）；
}
60% {
-moz变换：scaleY（0.98）；
-ms变换：scaleY（0.98）；
-webkit转换：scaleY（0。